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

fix prettier conflicts

Browse Source
This commit is contained in:
Loewy 2024-02-06 11:34:52 -08:00
parent eb2534ff94
commit 035ce9f1b9
9 changed files with 117 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
App.tsx
View File

@ -2,14 +2,13 @@ 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 { DEV_USER_ID } from "./config";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { DEV_USER_ID } from "./config";
// TODO: move to different file? // TODO: move to different file?
const SetAuthHeaderBasedOnEnv = () => { const SetAuthHeaderBasedOnEnv = () => {
const { setAuthHeader } = useAuthHeader(); const { setAuthHeader } = useAuthHeader();
useEffect(() => { useEffect(() => {
const setAuthAsync = async () => { const setAuthAsync = async () => {
if (DEV_USER_ID) { if (DEV_USER_ID) {
@ -17,7 +16,7 @@ const SetAuthHeaderBasedOnEnv = () => {
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 AsyncStorage.getItem('token'); // get from not firebase auth ASYNC 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}` });

76
auth/firebase-auth.tsx
View File

@ -1,45 +1,53 @@
import AsyncStorage from '@react-native-async-storage/async-storage'; 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";
export const handleSignInWithPhoneNumber = async (phoneNumber: string): Promise<FirebaseAuthTypes.ConfirmationResult | undefined> => { export const handleSignInWithPhoneNumber = async (
if (!phoneNumber) { phoneNumber: string,
Alert.alert("Please enter a valid phone number with a country code"); ): Promise<FirebaseAuthTypes.ConfirmationResult | undefined> => {
return; if (!phoneNumber) {
} Alert.alert("Please enter a valid phone number with a country code");
try { return;
const confirmation = await auth().signInWithPhoneNumber(phoneNumber); }
return confirmation; try {
} catch (err) { const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
console.warn(err); return confirmation;
Alert.alert("There was an error. Make sure you are using a country code (ex: +1 for US)"); } catch (err) {
} console.warn(err);
Alert.alert(
"There was an error. Make sure you are using a country code (ex: +1 for US)",
);
}
}; };
export const confirmCode = async (confirm: FirebaseAuthTypes.ConfirmationResult, code: string): Promise<void> => { export const confirmCode = async (
try { confirm: FirebaseAuthTypes.ConfirmationResult,
await confirm.confirm(code); code: string,
} catch { ): Promise<void> => {
Alert.alert("Invalid code, please try again."); try {
} await confirm.confirm(code);
} catch {
Alert.alert("Invalid code, please try again.");
}
}; };
// TODO: eslint not detecting ts? export const onAuthStateChanged = (
// eslint-disable-next-line no-unused-vars // TODO: eslint not detecting ts?
export const onAuthStateChanged = (callback: (user: FirebaseAuthTypes.User | null) => void) => { // eslint-disable-next-line no-unused-vars
return auth().onAuthStateChanged(callback); callback: (user: FirebaseAuthTypes.User | null) => void,
) => {
return auth().onAuthStateChanged(callback);
}; };
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) {
return await user.getIdToken(); return await user.getIdToken();
} }
return null; return null;
}; };
export const handleSignOut = async (): Promise<void> => { export const handleSignOut = async (): Promise<void> => {
await AsyncStorage.removeItem('token'); await AsyncStorage.removeItem("token");
await auth().signOut() await auth().signOut();
} };

24
auth/index.ts
View File

@ -1,15 +1,15 @@
import { import {
handleSignInWithPhoneNumber, confirmCode,
confirmCode, getCurrentUserToken,
onAuthStateChanged, handleSignInWithPhoneNumber,
getCurrentUserToken, handleSignOut,
handleSignOut onAuthStateChanged,
} from './firebase-auth' } from "./firebase-auth";
export { export {
handleSignInWithPhoneNumber, confirmCode,
confirmCode, getCurrentUserToken,
onAuthStateChanged, handleSignInWithPhoneNumber,
getCurrentUserToken, handleSignOut,
handleSignOut onAuthStateChanged,
} };

30
component/buttons/sign-out.tsx
View File

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

15
config.ts
View File

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

8
env.d.tsx
View File

@ -1,7 +1,7 @@
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
declare namespace NodeJS { declare namespace NodeJS {
interface ProcessEnv { interface ProcessEnv {
EXPO_PUBLIC_API_URI: string; EXPO_PUBLIC_API_URI: string;
EXPO_PUBLIC_DEV_USER_ID?: string; EXPO_PUBLIC_DEV_USER_ID?: string;
} }
} }

12
graphql/client.tsx
View File

@ -15,7 +15,7 @@ import React, {
useState, useState,
} from "react"; } from "react";
import { API_URI } from '../config' import { API_URI } from "../config";
type Props = { type Props = {
children: ReactNode; children: ReactNode;
@ -23,11 +23,11 @@ type Props = {
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);

2
package.json
View File

@ -88,4 +88,4 @@
"@babel/core": "^7.20.2", "@babel/core": "^7.20.2",
"babel-loader": "^8.3.0" "babel-loader": "^8.3.0"
} }
} }

49
screens/login.tsx
View File

@ -1,5 +1,7 @@
// Login.tsx // Login.tsx
import React, { useEffect, useState } from 'react'; import AsyncStorage from "@react-native-async-storage/async-storage";
import { FirebaseAuthTypes } from "@react-native-firebase/auth";
import React, { useEffect, useState } from "react";
import { import {
Button, Button,
Keyboard, Keyboard,
@ -7,27 +9,30 @@ import {
TextInput, TextInput,
TouchableWithoutFeedback, TouchableWithoutFeedback,
View, View,
} from 'react-native'; } from "react-native";
import { handleSignInWithPhoneNumber, confirmCode, onAuthStateChanged } from '../auth'; import {
import { FirebaseAuthTypes } from '@react-native-firebase/auth'; confirmCode,
import { useAuthHeader } from '../graphql/client'; handleSignInWithPhoneNumber,
import AsyncStorage from '@react-native-async-storage/async-storage'; onAuthStateChanged,
import SignOutButton from '../component/buttons/sign-out'; } from "../auth";
import SignOutButton from "../component/buttons/sign-out";
import { useAuthHeader } from "../graphql/client";
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] =
const { authHeader, setAuthHeader } = useAuthHeader() useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
const { authHeader, setAuthHeader } = useAuthHeader();
useEffect(() => { useEffect(() => {
const unsubscribe = onAuthStateChanged(async (user) => { const unsubscribe = onAuthStateChanged(async (user) => {
setUser(user) setUser(user);
if (user) { if (user) {
const token = await user.getIdToken() const token = await user.getIdToken();
if (token) { if (token) {
await AsyncStorage.setItem('token', token); await AsyncStorage.setItem("token", token);
setAuthHeader({ key: "Authorization", value: `Bearer ${token}` }); setAuthHeader({ key: "Authorization", value: `Bearer ${token}` });
} }
} }
@ -36,11 +41,9 @@ export default function Login() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
return ( return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}> <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: "center" }}>
<TextInput <TextInput
style={{ style={{
width: "50%", width: "50%",
@ -74,10 +77,16 @@ export default function Login() {
/> />
)} )}
<Button <Button
title={!confirm ? 'Receive code' : 'Confirm code'} title={!confirm ? "Receive code" : "Confirm code"}
onPress={() => !confirm ? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm) : confirm && confirmCode(confirm, code)} onPress={() =>
!confirm
? handleSignInWithPhoneNumber(phoneNumber).then(setConfirm)
: confirm && confirmCode(confirm, code)
}
/> />
<Text>{authHeader.key}: {authHeader.value}</Text> <Text>
{authHeader.key}: {authHeader.value}
</Text>
{user && ( {user && (
<> <>
<Text style={{ marginTop: 10 }}> <Text style={{ marginTop: 10 }}>