here you go loewy

This commit is contained in:
Andy Malkin 2024-02-07 16:59:11 -08:00
parent b9221fa949
commit 3a476e0db4
5 changed files with 69 additions and 54 deletions

View File

@ -30,7 +30,7 @@ module.exports = {
rules: { rules: {
// Best Practices // Best Practices
eqeqeq: ["error", "always"], // Enforce '===' instead of '==' 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 "no-unused-vars": "warn", // Warn about variables that are declared but not used
// React Specific // React Specific

View File

@ -38,6 +38,8 @@ export const onAuthStateChanged = (
return auth().onAuthStateChanged(callback); return auth().onAuthStateChanged(callback);
}; };
export const currentUser = () => auth().currentUser;
export const getCurrentUserToken = async (): Promise<string | null> => { export const getCurrentUserToken = async (): Promise<string | null> => {
const user = auth().currentUser; const user = auth().currentUser;
if (user) { if (user) {

View File

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

View File

@ -1,8 +1,7 @@
import { DEV_USER_ID } from "@env"; import { DEV_USER_ID } from "@env";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { FirebaseAuthTypes } from "@react-native-firebase/auth"; import { FirebaseAuthTypes } from "@react-native-firebase/auth";
import React, { createContext, useContext, useEffect, useState } from "react"; import React, { createContext, useContext, useEffect, useState } from "react";
import { handleSignOut, onAuthStateChanged } from "../auth/firebase-auth"; import { currentUser, handleSignOut, onAuthStateChanged } from "../auth";
import { useAuthHeader } from "../graphql/client"; import { useAuthHeader } from "../graphql/client";
interface AuthContextType { interface AuthContextType {
@ -19,25 +18,44 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
}) => { }) => {
const { setAuthHeader } = useAuthHeader(); const { setAuthHeader } = useAuthHeader();
const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null); const [contextUser, setContextUser] = useState<FirebaseAuthTypes.User | null>(
null,
);
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false); const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true); // this is for a LoadingContext (auth, app reloads, foreground etc) const [isLoading, setIsLoading] = useState<boolean>(true); // this is for a LoadingContext (auth, app reloads, foreground etc)
const authStateChangeCallback = async (user) => { const _completeAuthentication = (
console.log("user:", user); 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) { if (user) {
const token = await user.getIdToken(); const token = await user.getIdToken();
if (token) { _completeAuthentication(user, token, true);
await AsyncStorage.setItem("token", token);
setAuthHeader({ key: "Authorization", value: token });
setUser(user);
setIsLoggedIn(true);
setIsLoading(false)
}
} else { } else {
setIsLoggedIn(false); _completeAuthentication(undefined, undefined, false);
} }
} };
useEffect(() => {
let unsubscribe = () => {
console.log("Dev mode unsubscribe - really dense fn");
};
if (!DEV_USER_ID) {
unsubscribe = onAuthStateChanged(authStateChangeCallback);
}
return unsubscribe;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => { useEffect(() => {
const setAuthAsync = async () => { const setAuthAsync = async () => {
@ -47,27 +65,19 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
setAuthHeader({ key: "user_id", value: DEV_USER_ID }); setAuthHeader({ key: "user_id", value: DEV_USER_ID });
setIsLoggedIn(true); setIsLoggedIn(true);
setIsLoading(false); setIsLoading(false);
} }
}; };
setAuthAsync(); setAuthAsync();
}, [setAuthHeader]); }, [setAuthHeader]);
useEffect(() => {
let unsubscribe: () => void = () => console.log('Dev mode unsubscribe - really dense fn')
if (!DEV_USER_ID) {
unsubscribe = onAuthStateChanged(authStateChangeCallback);
}
return unsubscribe;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const logOut = async () => { const logOut = async () => {
await AsyncStorage.removeItem("token");
await handleSignOut(); await handleSignOut();
}; };
return ( return (
<AuthContext.Provider value={{ isLoggedIn, isLoading, user, logOut }}> <AuthContext.Provider
value={{ isLoggedIn, isLoading, user: contextUser, logOut }}
>
{children} {children}
</AuthContext.Provider> </AuthContext.Provider>
); );

View File

@ -1,36 +1,39 @@
import React, { createContext, useEffect, useState } from 'react'; import React, { createContext, useEffect, useState } from "react";
import { ActivityIndicator, StyleSheet, View } from 'react-native'; import { ActivityIndicator, StyleSheet, View } from "react-native";
import { colors } from '../../styles'; import AsyncStorage from "@react-native-async-storage/async-storage";
import AsyncStorage from '@react-native-async-storage/async-storage'; import { colors } from "../../styles";
const LoadingContext = createContext<boolean>(false); const LoadingContext = createContext<boolean>(false);
export default function Loading({ children }) { export default function Loading({ children }) {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
const checkHasToken = async () => { const checkHasToken = async () => {
const hasToken = await AsyncStorage.getItem('token'); const hasToken = await AsyncStorage.getItem("token");
// needs to connect to app state // needs to connect to app state
return hasToken return hasToken;
} };
checkHasToken() checkHasToken().then(() => setLoading(false));
.then(() => setLoading(false)) }, []);
}, []);
if (!loading) { if (!loading) {
return <LoadingContext.Provider value={loading}>{children}</LoadingContext.Provider>; return (
} <LoadingContext.Provider value={loading}>
{children}
</LoadingContext.Provider>
);
}
return ( return (
<View style={s.container}> <View style={s.container}>
<ActivityIndicator size="large" color={colors.tournamentBlue} /> <ActivityIndicator size="large" color={colors.tournamentBlue} />
</View> </View>
); );
} }
const s = StyleSheet.create({ const s = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' } container: { flex: 1, justifyContent: "center", alignItems: "center" },
}); });