railbird/railbird-gql
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: railbird/railbird-mobile#103
Reviewed-by: Ivan Malison <ivanmalison@gmail.com>
This commit is contained in:
loewy 2024-02-07 22:02:20 -07:00
commit f559c1e215
12 changed files with 134 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -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

36
App.tsx
View File

@ -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 />
<AuthProvider>
<AppNavigator />
</AuthProvider>
</ClientProvider>
);
};

3
package.json
View File

@ -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",

8
src/auth/firebase-auth.tsx
View File

@ -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();
};

4
src/auth/index.ts
View File

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

16
src/component/buttons/sign-out.tsx
View File

@ -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 () => {
const handleSignOut = async () => {
await logOut();
setAuthHeader({ key: "Authorization", value: "" });
await handleSignOut();
}}
/>
);
};
return <Button title={"Sign out"} onPress={handleSignOut} />;
}

91
src/context/auth-context.tsx Normal file
View File

@ -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;
};

3
src/context/index.ts Normal file
View File

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

19
src/navigation/app-navigator.tsx
View File

@ -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>
);

53
src/screens/login.tsx
View File

@ -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>
);

2
src/screens/session.tsx
View File

@ -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>
);
}

19
yarn.lock
View File

@ -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"