Merge pull request 'Auth-Context -- Navigation' (#103) from loewy/auth-context into master

Reviewed-on: railbird/railbird-mobile#103
Reviewed-by: Ivan Malison <ivanmalison@gmail.com>

.eslintrc.js

@@ -30,7 +30,7 @@ module.exports = {
   rules: {
     // Best Practices
     eqeqeq: ["error", "always"], // Enforce '===' instead of '=='
-    curly: "error", // Require curly braces for all control statements
+    curly: ["error", "multi-line", "consistent"], // Require curly braces for all control statements
     "no-unused-vars": "warn", // Warn about variables that are declared but not used
 
     // React Specific

App.tsx

@@ -1,40 +1,14 @@
-import React, { useEffect } from "react";
-import { ClientProvider, useAuthHeader } from "./src/graphql/client";
+import React from "react";
+import { AuthProvider } from "./src/context";
+import { ClientProvider } from "./src/graphql/client";
 import AppNavigator from "./src/navigation/app-navigator";
 
-import { DEV_USER_ID } from "@env";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-// TODO: move to different file?
-const SetAuthHeaderBasedOnEnv = () => {
-	const { setAuthHeader } = useAuthHeader();
-
-	useEffect(() => {
-		const setAuthAsync = async () => {
-			if (DEV_USER_ID) {
-				console.log("Setting fake authorization user to: ", DEV_USER_ID);
-				setAuthHeader({ key: "user_id", value: DEV_USER_ID });
-			} else {
-				// Fetch token for authenticated users in production
-				const token = await AsyncStorage.getItem("token"); // get from not firebase auth ASYNC
-				if (token) {
-					console.log("Setting firebase auth token");
-					setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
-				}
-			}
-		};
-
-		setAuthAsync();
-	}, [setAuthHeader]);
-
-	return null;
-};
-
 const App: React.FC = () => {
 	return (
 		<ClientProvider>
-			<SetAuthHeaderBasedOnEnv />
-			<AppNavigator />
+			<AuthProvider>
+				<AppNavigator />
+			</AuthProvider>
 		</ClientProvider>
 	);
 };

package.json

@@ -11,7 +11,7 @@
 		"android:test": "node ./start.js test",
 		"ios": "expo run:ios",
 		"ios:dev": "NODE_ENV=development expo run:ios",
-		"ios:prod": "NODE_ENV=production expo run:ios",
+		"ios:prod": "NODE_ENV=test expo run:ios",
 		"web": "expo start --web",
 		"lint": "eslint . --ext .js,.ts,.tsx",
 		"lint:fix": "eslint . --ext .ts,.tsx --fix",
@@ -25,7 +25,6 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.8.8",
-		"@react-native-async-storage/async-storage": "^1.21.0",
 		"@react-native-camera-roll/camera-roll": "^7.4.0",
 		"@react-native-firebase/app": "^18.8.0",
 		"@react-native-firebase/auth": "^18.8.0",

src/auth/firebase-auth.tsx

@@ -1,4 +1,3 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
 import { Alert } from "react-native";
 
@@ -39,6 +38,8 @@ export const onAuthStateChanged = (
 	return auth().onAuthStateChanged(callback);
 };
 
+export const currentUser = () => auth().currentUser;
+
 export const getCurrentUserToken = async (): Promise<string | null> => {
 	const user = auth().currentUser;
 	if (user) {
@@ -47,7 +48,6 @@ export const getCurrentUserToken = async (): Promise<string | null> => {
 	return null;
 };
 
-export const handleSignOut = async (): Promise<void> => {
-	await AsyncStorage.removeItem("token");
-	await auth().signOut();
+export const handleSignOut = (): Promise<void> => {
+	return auth().signOut();
 };

src/auth/index.ts

@@ -1,6 +1,6 @@
 import {
 	confirmCode,
-	getCurrentUserToken,
+	currentUser,
 	handleSignInWithPhoneNumber,
 	handleSignOut,
 	onAuthStateChanged,
@@ -8,7 +8,7 @@ import {
 
 export {
 	confirmCode,
-	getCurrentUserToken,
+	currentUser,
 	handleSignInWithPhoneNumber,
 	handleSignOut,
 	onAuthStateChanged,

src/component/buttons/sign-out.tsx

@@ -1,18 +1,16 @@
 import React from "react";
 import { Button } from "react-native";
-import { handleSignOut } from "../../auth";
+import { useAuth } from "../../context";
 import { useAuthHeader } from "../../graphql/client";
 
 export default function SignOutButton(): React.JSX.Element {
+	const { logOut } = useAuth();
 	const { setAuthHeader } = useAuthHeader();
 
-	return (
-		<Button
-			title={"Sign out"}
-			onPress={async () => {
-				setAuthHeader({ key: "Authorization", value: "" });
-				await handleSignOut();
-			}}
-		/>
-	);
+	const handleSignOut = async () => {
+		await logOut();
+		setAuthHeader({ key: "Authorization", value: "" });
+	};
+
+	return <Button title={"Sign out"} onPress={handleSignOut} />;
 }

src/context/auth-context.tsx

@@ -0,0 +1,91 @@
+import { DEV_USER_ID } from "@env";
+import { FirebaseAuthTypes } from "@react-native-firebase/auth";
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { handleSignOut, onAuthStateChanged } from "../auth";
+import { useAuthHeader } from "../graphql/client";
+
+interface AuthContextType {
+	isLoggedIn: boolean;
+	isLoading: boolean;
+	user: FirebaseAuthTypes.User | null;
+	logOut: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
+	children,
+}) => {
+	const { setAuthHeader } = useAuthHeader();
+
+	const [contextUser, setContextUser] = useState<FirebaseAuthTypes.User | null>(
+		null,
+	);
+	const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+	const [isLoading, setIsLoading] = useState<boolean>(true); // this is for a LoadingContext (auth, app reloads, foreground etc)
+
+	const _completeAuthentication = (
+		user: FirebaseAuthTypes.User,
+		token: string,
+		isLoggedIn: boolean,
+	) => {
+		setAuthHeader({ key: "Authorization", value: token });
+		setContextUser(user);
+		setIsLoggedIn(isLoggedIn);
+		setIsLoading(false);
+	};
+
+	const authStateChangeCallback = async (user: FirebaseAuthTypes.User) => {
+		if (user) {
+			const token = await user.getIdToken();
+			_completeAuthentication(user, token, true);
+		} else {
+			_completeAuthentication(undefined, undefined, false);
+		}
+	};
+
+	useEffect(() => {
+		let unsubscribe = () => {
+			console.log("Dev Mode");
+		};
+
+		if (!DEV_USER_ID) {
+			unsubscribe = onAuthStateChanged(authStateChangeCallback);
+		}
+
+		return unsubscribe;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		const setAuthAsync = async () => {
+			if (DEV_USER_ID) {
+				console.log("Setting fake authorization user to: ", DEV_USER_ID);
+				setAuthHeader({ key: "user_id", value: DEV_USER_ID });
+				setIsLoggedIn(true);
+				setIsLoading(false);
+			}
+		};
+		setAuthAsync();
+	}, [setAuthHeader]);
+
+	const logOut = async () => {
+		await handleSignOut();
+	};
+
+	return (
+		<AuthContext.Provider
+			value={{ isLoggedIn, isLoading, user: contextUser, logOut }}
+		>
+			{children}
+		</AuthContext.Provider>
+	);
+};
+
+export const useAuth = () => {
+	const context = useContext(AuthContext);
+	if (context === undefined) {
+		throw new Error("useAuth must be used within an AuthProvider");
+	}
+	return context;
+};

src/context/index.ts

@@ -0,0 +1,3 @@
+import { AuthProvider, useAuth } from "./auth-context";
+
+export { AuthProvider, useAuth };

src/navigation/app-navigator.tsx

@@ -6,23 +6,19 @@ import {
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { useColorScheme } from "react-native";
 
+import { useAuth } from "../context";
 import Login from "../screens/login";
 import Tabs from "./tab-navigator";
 
 const Stack = createNativeStackNavigator();
 
-const ScreensStack = () => (
+const AppStack = () => (
 	<Stack.Navigator>
 		<Stack.Screen
 			name="Tabs"
 			component={Tabs}
 			options={{ headerShown: false }}
 		/>
-		<Stack.Screen
-			name="Login"
-			component={Login}
-			options={{ headerShown: false }}
-		/>
 	</Stack.Navigator>
 );
 /**
@@ -35,11 +31,20 @@ const ScreensStack = () => (
 export default function AppNavigator(): React.JSX.Element {
 	// useColorScheme get's the theme from device settings
 	const scheme = useColorScheme();
+	const { isLoggedIn } = useAuth();
 
 	return (
 		<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
 			<Stack.Navigator screenOptions={{ headerShown: false }}>
-				<Stack.Screen name="App" component={ScreensStack} />
+				{isLoggedIn ? (
+					<Stack.Screen name="App" component={AppStack} />
+				) : (
+					<Stack.Screen
+						name="Login"
+						component={Login}
+						options={{ headerShown: false }}
+					/>
+				)}
 			</Stack.Navigator>
 		</NavigationContainer>
 	);

src/screens/login.tsx

@@ -1,51 +1,24 @@
 // Login.tsx
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { FirebaseAuthTypes } from "@react-native-firebase/auth";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
 	Button,
 	Keyboard,
-	Text,
 	TextInput,
 	TouchableWithoutFeedback,
 	View,
 } from "react-native";
-import {
-	confirmCode,
-	handleSignInWithPhoneNumber,
-	onAuthStateChanged,
-} from "../auth";
-import SignOutButton from "../component/buttons/sign-out";
-import { useAuthHeader } from "../graphql/client";
+import { confirmCode, handleSignInWithPhoneNumber } from "../auth";
 
-export default function Login({ navigation }) {
+export default function Login() {
 	const [phoneNumber, setPhoneNumber] = useState<string>("");
 	const [code, setCode] = useState<string>("");
-	const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null);
 	const [confirm, setConfirm] =
 		useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
-	const { authHeader, setAuthHeader } = useAuthHeader();
-
-	useEffect(() => {
-		const unsubscribe = onAuthStateChanged(async (user) => {
-			setUser(user);
-			if (user) {
-				const token = await user.getIdToken();
-				if (token) {
-					await AsyncStorage.setItem("token", token);
-					setAuthHeader({ key: "Authorization", value: token });
-				}
-			}
-		});
-		return unsubscribe;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	console.log(authHeader.value);
 
 	return (
 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-			<View style={{ alignItems: "center" }}>
+			<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
 				<TextInput
 					style={{
 						width: "50%",
@@ -86,24 +59,6 @@ export default function Login({ navigation }) {
 							: confirm && confirmCode(confirm, code)
 					}
 				/>
-				<Text>
-					{authHeader.key}: {authHeader.value}
-				</Text>
-				{user && (
-					<>
-						<Text style={{ marginTop: 10 }}>
-							Display name: {user?.displayName}
-						</Text>
-						<Text>Phone number: {user?.phoneNumber}</Text>
-
-						<SignOutButton />
-						<Button
-							color="orange"
-							title="Go to app"
-							onPress={() => navigation.push("Tabs")}
-						/>
-					</>
-				)}
 			</View>
 		</TouchableWithoutFeedback>
 	);

src/screens/session.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 import { graph_data_two_measures } from "../../test/mock/charts/mock-data";
+import SignOutButton from "../component/buttons/sign-out";
 import BarGraph from "../component/charts/bar-graph/bar-graph";
 
 // Session Mock - can be used for session summary screen using a query handler component
@@ -9,6 +10,7 @@ export default function SessionScreen() {
 	return (
 		<View style={StyleSheet.absoluteFill}>
 			<BarGraph data={graph_data_two_measures} />
+			<SignOutButton />
 		</View>
 	);
 }

yarn.lock

@@ -2523,13 +2523,6 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@react-native-async-storage/async-storage@^1.21.0":
-  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.21.0.tgz#d7e370028e228ab84637016ceeb495878b7a44c8"
-  integrity sha512-JL0w36KuFHFCvnbOXRekqVAUplmOyT/OuCQkogo6X98MtpSaJOKEAeZnYO8JB0U/RIEixZaGI5px73YbRm/oag==
-  dependencies:
-    merge-options "^3.0.4"
-
 "@react-native-camera-roll/camera-roll@^7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.4.0.tgz#931e25b076b40dc57ca6d380f0a85d494a120f06"
@@ -6965,11 +6958,6 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-obj@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
-  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
-
 is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -8195,13 +8183,6 @@ memory-cache@~0.2.0:
   resolved "https://registry.yarnpkg.com/memory-cache/-/memory-cache-0.2.0.tgz#7890b01d52c00c8ebc9d533e1f8eb17e3034871a"
   integrity sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==
 
-merge-options@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
-  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
-  dependencies:
-    is-plain-obj "^2.1.0"
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"