My profile

front/package.json

@@ -11,15 +11,17 @@
     "build": "expo export --platform web"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/stack": "^6.3.29",
     "expo": "~50.0.11",
     "expo-constants": "~15.4.5",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.8",
     "expo-status-bar": "~1.11.1",
     "firebase": "^10.11.0",
     "react": "18.2.0",
-    "react-native-dotenv": "^3.4.11",
     "react-native": "^0.73.6",
+    "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",

front/src/app/(tabs)/followRequestList.tsx

@@ -25,6 +25,17 @@ fetch("http://localhost:3000/requests/" + currentUserId.toString(), {
   .then((data) => {
     console.log("success: fetching matchRequests");
     matchRequests = data;
+  })
+  .catch((error) => {
+    // Handle Errors here.
+    // const errorCode = error.code;
+    // const errorMessage = error.message;
+    // The email of the user's account used.
+    // const email = error.customData.email;
+    // The AuthCredential type that was used.
+    // const credential = GoogleAuthProvider.credentialFromError(error);
+    // ...
+    console.error(error);
   });
 
 const List = (): JSX.Element => {

front/src/app/(tabs)/profile.tsx

@@ -6,13 +6,16 @@ import {
   ImageBackground,
 } from "react-native";
 
+import LogOutButton from "../../components/LogOutButton";
 import { useAuthContext } from "../../provider/AuthProvider";
 
 const image = { uri: "https://legacy.reactjs.org/logo-og.png" };
 
 const Profile = (): JSX.Element => {
   // sample
   console.log(useAuthContext());
+  const user = useAuthContext();
+
   return (
     <View style={styles.container}>
       <View style={styles.imageContainer}>
@@ -21,27 +24,11 @@ const Profile = (): JSX.Element => {
       <ScrollView style={styles.container}>
         <View style={styles.profileContainer}>
           <Text style={styles.profileLabel}>Name:</Text>
-          <Text style={styles.profileText}>Michael</Text>
-        </View>
-        <View style={styles.profileContainer}>
-          <Text style={styles.profileLabel}>Sex:</Text>
-          <Text style={styles.profileText}>Male</Text>
+          <Text style={styles.profileText}>{user?.name}</Text>
         </View>
         <View style={styles.profileContainer}>
-          <Text style={styles.profileLabel}>Sample:</Text>
-          <Text style={styles.profileText}>Sample Text</Text>
-        </View>
-        <View style={styles.profileContainer}>
-          <Text style={styles.profileLabel}>Sample:</Text>
-          <Text style={styles.profileText}>Sample Text</Text>
-        </View>
-        <View style={styles.profileContainer}>
-          <Text style={styles.profileLabel}>Sample:</Text>
-          <Text style={styles.profileText}>Sample Text</Text>
-        </View>
-        <View style={styles.profileContainer}>
-          <Text style={styles.profileLabel}>Sample:</Text>
-          <Text style={styles.profileText}>Sample Text</Text>
+          <Text style={styles.profileLabel}>ID:</Text>
+          <Text style={styles.profileText}>{user?.id}</Text>
         </View>
         <View style={styles.profileContainer}>
           <Text style={styles.profileLabel}>Sample:</Text>
@@ -59,6 +46,7 @@ const Profile = (): JSX.Element => {
           <Text style={styles.profileLabel}>Sample:</Text>
           <Text style={styles.profileText}>Sample Text</Text>
         </View>
+        <LogOutButton />
       </ScrollView>
     </View>
   );

front/src/app/(tabs)/login.tsx → front/src/app/login.tsx

@@ -1,48 +1,55 @@
+import { useRouter } from "expo-router";
 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { View, Text, StyleSheet } from "react-native";
 
-import Button from "../../components/Button";
-import { auth } from "../../firebase/firebaseconfig";
+import Button from "../components/Button";
+import { auth } from "../firebase/firebaseconfig";
+
 const provider = new GoogleAuthProvider();
 
-const handlePress = (): void => {
-  signInWithPopup(auth, provider)
-    .then((result) => {
-      // This gives you a Google Access Token. You can use it to access the Google API.
-      const credential = GoogleAuthProvider.credentialFromResult(result);
-      if (credential) {
-        // const token = credential.accessToken;
-        // The signed-in user info.
-        const user = result.user;
-        // IdP data available using getAdditionalUserInfo(result)
-        // ...
-        console.log(user.metadata);
-      }
-    })
-    .catch((error) => {
-      // Handle Errors here.
-      // const errorCode = error.code;
-      // const errorMessage = error.message;
-      // The email of the user's account used.
-      // const email = error.customData.email;
-      // The AuthCredential type that was used.
-      // const credential = GoogleAuthProvider.credentialFromError(error);
+const signIn = async (): Promise<void> => {
+  try {
+    const result = await signInWithPopup(auth, provider);
+    // This gives you a Google Access Token. You can use it to access the Google API.
+    const credential = GoogleAuthProvider.credentialFromResult(result);
+    if (credential) {
+      // const token = credential.accessToken;
+      // The signed-in user info.
+      const user = result.user;
+      // IdP data available using getAdditionalUserInfo(result)
       // ...
-      console.error(error);
-    });
+      console.log(user.metadata);
+      console.log("ログインに成功しました");
+    }
+  } catch (error) {
+    // Handle Errors here.
+    // const errorCode = error.code;
+    // const errorMessage = error.message;
+    // The email of the user's account used.
+    // const email = error.customData.email;
+    // The AuthCredential type that was used.
+    // const credential = GoogleAuthProvider.credentialFromError(error);
+    // ...
+    console.error(error);
+    console.log("ログインに失敗しました");
+  }
 };
 
 const LogIn = (): JSX.Element => {
+  const router = useRouter();
+
   return (
     <View style={styles.container}>
       <View style={styles.inner}>
         <Text style={styles.title}>Log In</Text>
         <Button
           label="Log In"
-          onPress={() => {
-            handlePress();
+          onPress={async () => {
+            await signIn();
+            router.push("/");
           }}
         />
+
         <View style={styles.footer}>
           <Text style={styles.footerText}>
             東京大学のGoogleアカウントを用いてログインしてください

front/src/components/LogOutButton.tsx

@@ -1,22 +1,31 @@
-import { Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { signOut } from "firebase/auth";
+import { TouchableOpacity } from "react-native";
+
+import { auth } from "../firebase/firebaseconfig";
 
 const LogOutButton = (): JSX.Element => {
+  const router = useRouter();
   return (
-    <TouchableOpacity>
-      <Text style={styles.logOutButtonLabel}>ログアウト</Text>
+    <TouchableOpacity
+      onPress={() => {
+        signOutUser();
+        router.replace("/login");
+      }}
+    >
+      ログアウト
     </TouchableOpacity>
   );
 };
 
-const styles = StyleSheet.create({
-  logOutButtonLabel: {
-    color: "rgba(255, 255, 255, 0.7)",
-    fontSize: 16,
-    lineHeight: 32,
-    fontWeight: "bold",
-    paddingVertical: 8,
-    paddingHorizontal: 24,
-  },
-});
+const signOutUser = (): void => {
+  signOut(auth)
+    .then(() => {
+      console.log("サインアウトしました");
+    })
+    .catch((error) => {
+      console.error("サインアウトエラー: ", error);
+    });
+};
 
 export default LogOutButton;

front/src/provider/AuthProvider.tsx

@@ -1,5 +1,6 @@
+import { useRouter } from "expo-router";
 import { getAuth, onAuthStateChanged } from "firebase/auth";
-import { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 
 interface User {
   id: number;
@@ -16,6 +17,8 @@ export default function AuthProvider({
   children: React.ReactNode;
 }) {
   const [user, setUser] = useState<User | null | undefined>(undefined);
+  const router = useRouter();
+
   async function getUserData(uid: string): Promise<User> {
     try {
       const response = await fetch(`http://localhost:3000/users/${uid}`);
@@ -30,13 +33,20 @@ export default function AuthProvider({
     try {
       const auth = getAuth();
       return onAuthStateChanged(auth, (firebaseUser) => {
-        getUserData(firebaseUser!.uid).then((user) => setUser(user));
+        if (firebaseUser) {
+          getUserData(firebaseUser.uid).then((user) => setUser(user));
+        } else {
+          setUser(null);
+          router.replace("/login"); // ログインされていない場合にリダイレクト
+          console.log("リダイレクトされました");
+        }
       });
-    } catch (error) {
+    } catch {
       setUser(null);
-      throw error;
+      router.replace("/login"); // エラー発生時にリダイレクト
+      console.log("エラーです");
     }
-  }, []);
+  }, [router]);
 
   return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
 }