wip: token passed to headers, need to make hook for onAuthStateChanged

This commit is contained in:
Loewy 2024-02-05 23:58:39 -08:00
commit d93d73dc3a
11 changed files with 107 additions and 45 deletions

2
.env
View File

@ -1,2 +0,0 @@
# .env.development
API_URI=https://api-dev.railbird.ai/graphql

View File

@ -1,3 +1,3 @@
# .env.development # .env.development
API_URI="http://192.168.1.28:8000/graphql" EXPO_PUBLIC_API_URI="http://192.168.1.28:8000/graphql"
DEV_USER_ID=1 EXPO_PUBLIC_DEV_USER_ID=1

View File

@ -1,2 +1,2 @@
# .env.production # .env.production
API_URI=https://api-dev.railbird.ai/graphql EXPO_PUBLIC_API_URI=https://api-dev.railbird.ai/graphql

25
App.tsx
View File

@ -1,8 +1,9 @@
import { DEV_USER_ID } from "@env";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { ClientProvider, useAuthHeader } from "./graphql/client"; import { ClientProvider, useAuthHeader } from "./graphql/client";
import AppNavigator from "./navigation/app-navigator"; import AppNavigator from "./navigation/app-navigator";
import { getCurrentUserToken } from "./auth";
import { DEV_USER_ID } from "./config";
import AsyncStorage from "@react-native-async-storage/async-storage";
// TODO: can be done when we go with a src top level directory -- should live on cofig // TODO: can be done when we go with a src top level directory -- should live on cofig
const SetAuthHeaderBasedOnEnv = () => { const SetAuthHeaderBasedOnEnv = () => {
@ -11,17 +12,17 @@ const SetAuthHeaderBasedOnEnv = () => {
useEffect(() => { useEffect(() => {
const setAuthAsync = async () => { const setAuthAsync = async () => {
// if (DEV_USER_ID) { if (DEV_USER_ID) {
// console.log("Setting fake authorization user to: ", DEV_USER_ID); console.log("Setting fake authorization user to: ", DEV_USER_ID);
// setAuthHeader({ key: "user_id", value: DEV_USER_ID }); setAuthHeader({ key: "user_id", value: DEV_USER_ID });
// } else { } else {
// Fetch token for authenticated users in production // Fetch token for authenticated users in production
const token = await getCurrentUserToken(); const token = await AsyncStorage.getItem('token'); // get from not firebase auth ASYNC
if (token) { if (token) {
console.log("Setting firebase auth token"); console.log("Setting firebase auth token");
setAuthHeader({ key: "Authorization", value: `Bearer ${token}` }); setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
} // handle error
} }
// }
}; };
setAuthAsync(); setAuthAsync();

View File

@ -1,3 +1,4 @@
import AsyncStorage from '@react-native-async-storage/async-storage';
import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth'; import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
import { Alert } from 'react-native'; import { Alert } from 'react-native';
@ -23,6 +24,8 @@ export const confirmCode = async (confirm: FirebaseAuthTypes.ConfirmationResult,
} }
}; };
// TODO: eslint not detecting ts?
// eslint-disable-next-line no-unused-vars
export const onAuthStateChanged = (callback: (user: FirebaseAuthTypes.User | null) => void) => { export const onAuthStateChanged = (callback: (user: FirebaseAuthTypes.User | null) => void) => {
return auth().onAuthStateChanged(callback); return auth().onAuthStateChanged(callback);
}; };
@ -37,12 +40,6 @@ export const getCurrentUserToken = async (): Promise<string | null> => {
}; };
export const signOut = async (): Promise<void> => { export const signOut = async (): Promise<void> => {
try { await AsyncStorage.removeItem('token');
auth().signOut() auth().signOut()
// tie in to AppNav
} catch (err) {
console.error(err)
// toggle appnav state regardless
// Handle sign out error - have to look into best way to do this - asyncstorage?
}
} }

21
config.ts Normal file
View File

@ -0,0 +1,21 @@
const warnEnv = [
'EXPO_PUBLIC_API_URI'
];
const errMsg =
'does not exist in the environment.';
const missingEnv: string[] = [];
for (const key of warnEnv) {
if (!process.env[key]) {
missingEnv.push(key);
}
}
if (missingEnv.length > 0) {
throw new Error(`${missingEnv.join(', ')} ${errMsg}`);
}
export const API_URI = process.env.EXPO_PUBLIC_API_URI;
export const DEV_USER_ID = process.env.EXPO_PUBLIC_DEV_USER_ID ?? false;

View File

@ -1,4 +1,7 @@
declare module "@env" { // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
export const API_URI: string; declare namespace NodeJS {
export const DEV_USER_ID: string; interface ProcessEnv {
EXPO_PUBLIC_API_URI: string;
EXPO_PUBLIC_DEV_USER_ID?: string;
}
} }

View File

@ -6,7 +6,7 @@ import {
InMemoryCache, InMemoryCache,
from, from,
} from "@apollo/client"; } from "@apollo/client";
import { API_URI } from "@env";
import React, { import React, {
ReactNode, ReactNode,
createContext, createContext,
@ -15,17 +15,19 @@ import React, {
useState, useState,
} from "react"; } from "react";
import { API_URI } from '../config'
type Props = { type Props = {
children: ReactNode; children: ReactNode;
}; };
export const AuthHeaderContext = createContext< export const AuthHeaderContext = createContext<
| { | {
authHeader: { key: string; value: string }; authHeader: { key: string; value: string };
setAuthHeader: React.Dispatch< setAuthHeader: React.Dispatch<
React.SetStateAction<{ key: string; value: string }> React.SetStateAction<{ key: string; value: string }>
>; >;
} }
| undefined | undefined
>(undefined); >(undefined);

View File

@ -7,9 +7,11 @@
"start:android": "expo start --android", "start:android": "expo start --android",
"start:ios": "expo start --ios", "start:ios": "expo start --ios",
"android": "expo run:android", "android": "expo run:android",
"android:prod": "cp .env.production .env && cat .env && NODE_ENV=production expo run:android", "android:dev": "NODE_ENV=development expo run:android",
"android:prod": "NODE_ENV=production expo run:android",
"ios": "expo run:ios", "ios": "expo run:ios",
"ios:prod": "cp .env.production .env && expo run:ios", "ios:dev": "NODE_ENV=development expo run:ios",
"ios:prod": "NODE_ENV=production expo run:ios",
"web": "expo start --web", "web": "expo start --web",
"lint": "eslint . --ext .js,.ts,.tsx", "lint": "eslint . --ext .js,.ts,.tsx",
"lint:fix": "eslint . --ext .ts,.tsx --fix", "lint:fix": "eslint . --ext .ts,.tsx --fix",
@ -23,6 +25,7 @@
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.8.8", "@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-camera-roll/camera-roll": "^7.4.0",
"@react-native-firebase/app": "^18.8.0", "@react-native-firebase/app": "^18.8.0",
"@react-native-firebase/auth": "^18.8.0", "@react-native-firebase/auth": "^18.8.0",
@ -48,7 +51,7 @@
"graphql": "^16.8.1", "graphql": "^16.8.1",
"jest": "^29.2.1", "jest": "^29.2.1",
"jest-expo": "~49.0.0", "jest-expo": "~49.0.0",
"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b", "railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#838304efdd49a093bd8f9cea6cd6ef9e306d888a",
"react": "18.2.0", "react": "18.2.0",
"react-native": "0.72.6", "react-native": "0.72.6",
"react-native-dotenv": "^3.4.9", "react-native-dotenv": "^3.4.9",

View File

@ -11,17 +11,32 @@ import {
import { signInWithPhoneNumber, confirmCode, onAuthStateChanged, signOut } from '../auth'; // Adjust the path as necessary import { signInWithPhoneNumber, confirmCode, onAuthStateChanged, signOut } from '../auth'; // Adjust the path as necessary
import { FirebaseAuthTypes } from '@react-native-firebase/auth'; import { FirebaseAuthTypes } from '@react-native-firebase/auth';
import { useAuthHeader } from '../graphql/client'; import { useAuthHeader } from '../graphql/client';
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Login() { export default function Login() {
const [phoneNumber, setPhoneNumber] = useState<string>(''); const [phoneNumber, setPhoneNumber] = useState<string>('');
const [code, setCode] = useState<string>(''); const [code, setCode] = useState<string>('');
const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null); const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null);
const [confirm, setConfirm] = useState<FirebaseAuthTypes.ConfirmationResult | null>(null); const [confirm, setConfirm] = useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
const authHeader = useAuthHeader() const { authHeader, setAuthHeader } = useAuthHeader()
useEffect(() => { useEffect(() => {
const subscriber = onAuthStateChanged(setUser); const unsubscribe = onAuthStateChanged(async (user) => {
return subscriber; // This may need adjustment based on your specific implementation console.log('🦊 | useFirebaseAuthSetup | onAuthStateChanged | user:', user);
// TODO: see if should save the user in the store or use those info some how or not, ot just need the accessToken
setUser(user)
if (user) {
const token = await user.getIdToken()
if (token) {
await AsyncStorage.setItem('token', token);
setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
}
}
console.log('🦛 | user.emailVerified:', user?.emailVerified);
});
return unsubscribe;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
@ -65,7 +80,7 @@ export default function Login() {
title={!confirm ? 'Receive code' : 'Confirm code'} title={!confirm ? 'Receive code' : 'Confirm code'}
onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)} onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)}
/> />
<Text>{authHeader.authHeader.key}: {authHeader.authHeader.value}</Text> <Text>{authHeader.key}: {authHeader.value}</Text>
{user && ( {user && (
<> <>
<Text style={{ marginTop: 10 }}> <Text style={{ marginTop: 10 }}>
@ -75,7 +90,10 @@ export default function Login() {
<Button <Button
title={'Sign out'} title={'Sign out'}
onPress={() => signOut()} onPress={() => {
setAuthHeader({ key: 'Authorization', value: '' })
signOut()
}}
/> />
</> </>
)} )}

View File

@ -2523,6 +2523,13 @@
resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== 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": "@react-native-camera-roll/camera-roll@^7.4.0":
version "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" resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.4.0.tgz#931e25b076b40dc57ca6d380f0a85d494a120f06"
@ -6958,6 +6965,11 @@ 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" resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ== 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: is-plain-object@^2.0.4:
version "2.0.4" version "2.0.4"
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@ -8183,6 +8195,13 @@ memory-cache@~0.2.0:
resolved "https://registry.yarnpkg.com/memory-cache/-/memory-cache-0.2.0.tgz#7890b01d52c00c8ebc9d533e1f8eb17e3034871a" resolved "https://registry.yarnpkg.com/memory-cache/-/memory-cache-0.2.0.tgz#7890b01d52c00c8ebc9d533e1f8eb17e3034871a"
integrity sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA== 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: merge-stream@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -9658,9 +9677,9 @@ queue@6.0.2:
dependencies: dependencies:
inherits "~2.0.3" inherits "~2.0.3"
"railbird-gql@git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b": "railbird-gql@git+https://dev.railbird.ai/railbird/railbird-gql.git#838304efdd49a093bd8f9cea6cd6ef9e306d888a":
version "1.0.0" version "1.0.0"
resolved "git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b" resolved "git+https://dev.railbird.ai/railbird/railbird-gql.git#838304efdd49a093bd8f9cea6cd6ef9e306d888a"
dependencies: dependencies:
"@apollo/client" "^3.9.2" "@apollo/client" "^3.9.2"
"@graphql-codegen/cli" "^5.0.0" "@graphql-codegen/cli" "^5.0.0"