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 AppNavigator from "./navigation/app-navigator";
import { DEV_USER_ID } from "./config";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { DEV_USER_ID } from "./config";
// TODO: move to different file?
const SetAuthHeaderBasedOnEnv = () => {
const { setAuthHeader } = useAuthHeader();
useEffect(() => {
const setAuthAsync = async () => {
if (DEV_USER_ID) {
@ -17,7 +16,7 @@ const SetAuthHeaderBasedOnEnv = () => {
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
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}` });

76
auth/firebase-auth.tsx
View File

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

24
auth/index.ts
View File

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

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

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

15
config.ts
View File

@ -1,20 +1,17 @@
const warnEnv = [
'EXPO_PUBLIC_API_URI'
];
const warnEnv = ["EXPO_PUBLIC_API_URI"];
const errMsg =
'does not exist in the environment.';
const errMsg = "does not exist in the environment.";
const missingEnv: string[] = [];
for (const key of warnEnv) {
if (!process.env[key]) {
missingEnv.push(key);
}
if (!process.env[key]) {
missingEnv.push(key);
}
}
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;

8
env.d.tsx
View File

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

12
graphql/client.tsx
View File

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

2
package.json
View File

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

49
screens/login.tsx
View File

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