diff --git a/App.tsx b/App.tsx index 340497d..3b02530 100644 --- a/App.tsx +++ b/App.tsx @@ -1,18 +1,8 @@ import React from "react"; -import {NavigationContainer} from "@react-navigation/native"; -import {AuthProvider} from "@/src/context/AuthProvider"; -import {ThemeProvider} from "@/src/context/ThemeProvider"; -import AppNavigator from "@/src/core/AppNavigator"; +import { Slot } from "expo-router"; export default function App() { - return ( - - - - - - - - ); + return ; } + diff --git a/app/_layout.tsx b/app/_layout.tsx new file mode 100644 index 0000000..c635bc2 --- /dev/null +++ b/app/_layout.tsx @@ -0,0 +1,21 @@ +import React from "react"; + + +import {AuthProvider} from "@/src/context/AuthProvider"; +import {ThemeProvider} from "@/src/context/ThemeProvider"; +import {Stack} from "expo-router"; + + +export default function Layout() { + return ( + + + + + + ); +} diff --git a/app/index.tsx b/app/index.tsx new file mode 100644 index 0000000..4bf6772 --- /dev/null +++ b/app/index.tsx @@ -0,0 +1,44 @@ +import React from "react"; + +import {useRouter} from "expo-router"; + +import ThemedBackground from "../src/components/themed/ThemedBackground"; +import Logo from "../src/components/Logo"; +import ThemedHeader from "../src/components/themed/ThemedHeader"; +import ThemedParagraph from "../src/components/themed/ThemedParagraph"; +import ThemedButton from "../src/components/themed/ThemedButton"; + +import {useAuth} from "@/src/context/AuthProvider"; +import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper"; + +export default function HomeScreen() { + const router = useRouter(); + const {token, logout} = useAuth(); + + return ( + + + + Welcome 💫 + Congratulations you are logged in. + {token} + router.push("/protected")}> + OwO what's this? + + + { + await logout(); + router.replace("/login"); + } + } + > + Sign out + + + + ); +} diff --git a/app/screens/LoginScreen.tsx b/app/login.tsx similarity index 74% rename from app/screens/LoginScreen.tsx rename to app/login.tsx index 72c0d33..686c993 100644 --- a/app/screens/LoginScreen.tsx +++ b/app/login.tsx @@ -1,20 +1,21 @@ import React, {useEffect, useState} from "react"; -import ThemedBackground from "../../src/components/themed/ThemedBackground"; -import Logo from "../../src/components/Logo"; -import ThemedHeader from "../../src/components/themed/ThemedHeader"; -import ThemedButton from "../../src/components/themed/ThemedButton"; -import ThemedTextInput from "../../src/components/themed/ThemedTextInput"; -import BackButton from "../../src/components/BackButton"; -import {useNavigation} from "@react-navigation/core"; +import ThemedBackground from "../src/components/themed/ThemedBackground"; +import Logo from "../src/components/Logo"; +import ThemedHeader from "../src/components/themed/ThemedHeader"; +import ThemedButton from "../src/components/themed/ThemedButton"; +import ThemedTextInput from "../src/components/themed/ThemedTextInput"; +import BackButton from "../src/components/BackButton"; + import {useAuth} from "@/src/context/AuthProvider"; import {useTheme} from "@/src/context/ThemeProvider"; +import {useRouter} from "expo-router"; export default function LoginScreen() { const {isAuthenticated, login, logout, error} = useAuth(); - const navigation = useNavigation(); + const router = useRouter(); const [username, setUsername] = useState({value: ""}); const [password, setPassword] = useState({value: ""}); const {toggleTheme} = useTheme(); @@ -25,10 +26,7 @@ export default function LoginScreen() { if (isAuthenticated) { console.log("User ist eingeloggt, weiterleiten..."); - navigation.reset({ - index: 0, - routes: [{name: "HomeScreen"}], - }); + router.replace("/"); } }, [isAuthenticated]); @@ -45,7 +43,7 @@ export default function LoginScreen() { Logout - navigation.navigate("HomeScreen")}> + router.push("/")}> Zurück @@ -54,7 +52,7 @@ export default function LoginScreen() { return ( - + Hello. + + + Welcome 💫 + Dies ist geheim. PSST ! + {token} + { + await logout(); + router.replace("/login"); + } + } + > + Sign out + + + + ); +} diff --git a/app/screens/HomeScreen.tsx b/app/screens/HomeScreen.tsx deleted file mode 100644 index e329e83..0000000 --- a/app/screens/HomeScreen.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; - -import ThemedBackground from "../../src/components/themed/ThemedBackground"; -import Logo from "../../src/components/Logo"; -import ThemedHeader from "../../src/components/themed/ThemedHeader"; -import ThemedParagraph from "../../src/components/themed/ThemedParagraph"; -import ThemedButton from "../../src/components/themed/ThemedButton"; -import {useNavigation} from "@react-navigation/core"; - -import {useAuth} from "@/src/context/AuthProvider"; - -export default function HomeScreen() { - console.log("HALLO LEUTE"); - const navigation = useNavigation(); - const {token, logout} = useAuth(); - - return ( - - - Welcome 💫 - Congratulations you are logged in. - {token} - navigation.navigate("ProtectedScreen")}> - OwO what's this? - - - { - await logout(); - navigation.reset({ - index: 0, - routes: [{name: "LoginScreen"}], - }) - } - } - > - Sign out - - - ); -} diff --git a/app/screens/ProtectedScreen.tsx b/app/screens/ProtectedScreen.tsx deleted file mode 100644 index 154d1d2..0000000 --- a/app/screens/ProtectedScreen.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import {useAuth} from "@/src/context/AuthProvider"; -import Logo from "@/src/components/Logo"; -import ThemedHeader from "@/src/components/themed/ThemedHeader"; -import ThemedParagraph from "@/src/components/themed/ThemedParagraph"; -import ThemedButton from "../../src/components/themed/ThemedButton"; -import {useNavigation} from "@react-navigation/core"; -import ThemedBackground from "@/src/components/themed/ThemedBackground"; - -export default function ProtectedScreen(): JSX.Element { - const navigation = useNavigation(); - const {token, logout} = useAuth(); - - return ( - - - Welcome 💫 - Dies ist geheim. PSST ! - {token} - { - await logout(); - navigation.reset({ - index: 0, - routes: [{name: "LoginScreen"}], - }) - } - } - > - Sign out - - - ); -} diff --git a/package-lock.json b/package-lock.json index 233b6ee..4c73766 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,6 @@ "dependencies": { "@expo/ngrok": "^4.1.3", "@expo/vector-icons": "^14.0.4", - "@react-navigation/bottom-tabs": "^7.1.3", - "@react-navigation/native": "^7.0.13", - "@react-navigation/stack": "^7.0.18", "axios": "^1.7.8", "expo": "^52.0.14", "expo-auth-session": "^6.0.1", @@ -36,8 +33,6 @@ "react-native-gesture-handler": "~2.21.2", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.3", - "react-native-safe-area-context": "4.14.0", - "react-native-screens": "^4.3.0", "react-native-status-bar-height": "^2.6.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.4" @@ -4623,24 +4618,6 @@ "nanoid": "3.3.7" } }, - "node_modules/@react-navigation/stack": { - "version": "7.0.18", - "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-7.0.18.tgz", - "integrity": "sha512-Y2Q/tgYaZIZE15ejoOFJ9vZLw8fV1x/huIP2L9qARRn427l+QACIU4TYGTBOK6PafqOlFdDmfLkDvdgjD/qwxQ==", - "license": "MIT", - "dependencies": { - "@react-navigation/elements": "^2.2.4", - "color": "^4.2.3" - }, - "peerDependencies": { - "@react-navigation/native": "^7.0.13", - "react": ">= 18.2.0", - "react-native": "*", - "react-native-gesture-handler": ">= 2.0.0", - "react-native-safe-area-context": ">= 4.0.0", - "react-native-screens": ">= 4.0.0" - } - }, "node_modules/@remix-run/node": { "version": "2.15.0", "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.15.0.tgz", @@ -15251,6 +15228,7 @@ "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz", "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==", "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -15462,6 +15440,7 @@ "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.14.0.tgz", "integrity": "sha512-/SyYpCulWQOnnXhRq6wepkhoyQMowHm1ptDyRz20s+YS/R9mbd+mK+jFyFCyXFJn8jp7vFl43VUCgspuOiEbwA==", "license": "MIT", + "peer": true, "peerDependencies": { "react": "*", "react-native": "*" @@ -15472,6 +15451,7 @@ "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.3.0.tgz", "integrity": "sha512-G0u8BPgu2vcRZoQTlRpBXKa0ElQSDvDBlRe6ncWwCeBmd5Uqa2I3tQ6Vn6trIE6+yneW/nD4p5wihEHlAWZPEw==", "license": "MIT", + "peer": true, "dependencies": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" diff --git a/package.json b/package.json index 444dc45..ded67e2 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "private": true, "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e", - "main": "node_modules/expo/AppEntry.js", + "main": "./node_modules/expo-router/entry.js", "scripts": { "start": "expo start", "android": "expo start --android", @@ -19,9 +19,6 @@ "dependencies": { "@expo/ngrok": "^4.1.3", "@expo/vector-icons": "^14.0.4", - "@react-navigation/bottom-tabs": "^7.1.3", - "@react-navigation/native": "^7.0.13", - "@react-navigation/stack": "^7.0.18", "axios": "^1.7.8", "expo": "^52.0.14", "expo-auth-session": "^6.0.1", @@ -45,8 +42,6 @@ "react-native-gesture-handler": "~2.21.2", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.3", - "react-native-safe-area-context": "4.14.0", - "react-native-screens": "^4.3.0", "react-native-status-bar-height": "^2.6.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.4" diff --git a/src/components/AuthenticatedWrapper.tsx b/src/components/AuthenticatedWrapper.tsx index 6df6bdf..59b5dcb 100644 --- a/src/components/AuthenticatedWrapper.tsx +++ b/src/components/AuthenticatedWrapper.tsx @@ -1,12 +1,12 @@ import React from "react"; import {useAuth} from "@/src/context/AuthProvider"; -import NotAuthenticated from "@/src/components/NotAuthenticated"; +import {Redirect} from "expo-router"; const AuthenticatedWrapper: React.FC<{ children: React.ReactNode }> = ({children}) => { const {isAuthenticated} = useAuth(); if (!isAuthenticated) { - return ; + return ; } return <>{children}; diff --git a/src/components/NotAuthenticated.tsx b/src/components/NotAuthenticated.tsx index 46ea95c..b16549b 100644 --- a/src/components/NotAuthenticated.tsx +++ b/src/components/NotAuthenticated.tsx @@ -2,11 +2,11 @@ import {Image} from "react-native"; import React from "react"; import ThemedBackground from "@/src/components/themed/ThemedBackground"; import ThemedParagraph from "@/src/components/themed/ThemedParagraph"; -import {useNavigation} from "@react-navigation/core"; import ThemedButton from "@/src/components/themed/ThemedButton"; +import {useRouter} from "expo-router"; export default function NotAuthenticated() { - const navigation = useNavigation(); + const router = useRouter(); return ( You are not authenticated. Please log in to view this content. - navigation.navigate("LoginScreen")}> + router.push("/login")}> Login diff --git a/src/context/AuthProvider.tsx b/src/context/AuthProvider.tsx index eaa07ce..542f1ac 100644 --- a/src/context/AuthProvider.tsx +++ b/src/context/AuthProvider.tsx @@ -49,6 +49,8 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({children} await saveInStorage(JWT_TOKEN_KEY, response.token); setToken(response.token); setIsAuthenticated(true); + // correctly logged in, reset error + setError(null); }; const logout = async () => { diff --git a/src/core/AppNavigator.tsx b/src/core/AppNavigator.tsx deleted file mode 100644 index 499a382..0000000 --- a/src/core/AppNavigator.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import {useAuth} from "@/src/context/AuthProvider"; -import React, {useEffect, useState} from "react"; -import {StyleSheet, Text, View} from "react-native"; -import {createStackNavigator} from "@react-navigation/stack"; -import LoginScreen from "@/app/screens/LoginScreen"; -import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper"; -import HomeScreen from "@/app/screens/HomeScreen"; -import ProtectedScreen from "@/app/screens/ProtectedScreen"; - -const Stack = createStackNavigator(); - -const AppNavigator = () => { - const {isAuthenticated} = useAuth(); // Auth-Status prüfen - const [initialRoute, setInitialRoute] = useState(null); - - useEffect(() => { - if (isAuthenticated === null) return; - setInitialRoute(isAuthenticated ? "HomeScreen" : "LoginScreen"); - }, [isAuthenticated]); - - if (initialRoute === null) { - // Ladebildschirm während der Berechnung - return ( - - Checking authentication... - - ); - } - - console.log("Initial route:", initialRoute) - console.log("isAuthenticated:", isAuthenticated) - - return ( - - - - {() => ( - - - - )} - - - {() => ( - - - - )} - - - - ); -}; - -export default AppNavigator; - -const styles = StyleSheet.create({ - loadingContainer: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#f2f2f2", // Optional: Anpassen an dein Theme - }, - loadingText: { - fontSize: 18, - color: "#333", - }, -});