Set dev mode auth headers

This commit is contained in:
Ivan Malison 2024-02-03 18:23:46 -07:00
parent e69f9dc2d8
commit fc3cf92dcf
5 changed files with 128 additions and 96 deletions

View File

@ -2,11 +2,16 @@ root = true
[*.tsx]
indent_style = tab
indent_size = 2
[*.ts]
indent_style = tab
indent_size = 2
[*.json]
end_of_line = lf
charset = utf-8
indent_style = space
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

16
App.tsx
View File

@ -1,10 +1,24 @@
import React from "react";
import AppNavigator from "./navigation/app-navigator";
import ClientProvider from "./graphql/client";
import { ClientProvider, useAuthHeader } from "./graphql/client";
import { DEV_USER_ID } from "@env";
const SetAuthHeaderBasedOnEnv = () => {
const { setAuthHeader } = useAuthHeader();
React.useEffect(() => {
if (DEV_USER_ID) {
setAuthHeader({ key: "user_id", value: DEV_USER_ID });
}
}, [setAuthHeader]);
return null;
};
const App: React.FC = () => {
return (
<ClientProvider>
<SetAuthHeaderBasedOnEnv />
<AppNavigator />
</ClientProvider>
);

View File

@ -1,3 +1,4 @@
declare module "@env" {
export const API_URI: string;
export const DEV_USER_ID: string;
}

View File

@ -1,4 +1,10 @@
import React, { ReactNode, createContext, useContext, useState } from "react";
import React, {
ReactNode,
createContext,
useContext,
useState,
useMemo,
} from "react";
import {
ApolloClient,
ApolloLink,
@ -13,31 +19,33 @@ type Props = {
children: ReactNode;
};
const AuthHeaderContext = createContext();
export const AuthHeaderProvider = ({ children }) => {
const [authHeader, setAuthHeader] = useState({ key: "", value: "" });
return (
<AuthHeaderContext.Provider value={{ authHeader, setAuthHeader }}>
{children}
</AuthHeaderContext.Provider>
);
};
export const AuthHeaderContext = createContext<
| {
authHeader: { key: string; value: string };
setAuthHeader: React.Dispatch<
React.SetStateAction<{ key: string; value: string }>
>;
}
| undefined
>(undefined);
// Hook to use the auth header context
export const useAuthHeader = () => useContext(AuthHeaderContext);
export const useAuthHeader = () => {
const context = useContext(AuthHeaderContext);
if (!context) {
throw new Error("useAuthHeader must be used within a ClientProvider");
}
return context;
};
const ClientProvider: React.FC<Props> = ({ children }) => {
export const ClientProvider: React.FC<Props> = ({ children }) => {
const [authHeader, setAuthHeader] = useState({ key: "", value: "" });
const httpLink = new HttpLink({
uri: API_URI,
uri: API_URI || "https://api-dev.railbird.ai/graphql",
});
const cache = new InMemoryCache({});
const { authHeader } = useAuthHeader();
const authMiddleware = new ApolloLink((operation, forward) => {
// Retrieve auth key and value from context
const { key, value } = authHeader;
if (key && value) {
@ -55,13 +63,16 @@ const ClientProvider: React.FC<Props> = ({ children }) => {
const client = useMemo(
() =>
new ApolloClient({
link: from([authMiddleware, httpLink]), // Chain the middleware with the httpLink
// Chain the middleware with the httpLink
link: from([authMiddleware, httpLink]),
cache: new InMemoryCache(),
}),
[authHeader],
);
return <ApolloProvider client={client}>{children}</ApolloProvider>;
return (
<AuthHeaderContext.Provider value={{ authHeader, setAuthHeader }}>
<ApolloProvider client={client}>{children}</ApolloProvider>
</AuthHeaderContext.Provider>
);
};
export default ClientProvider;

View File

@ -1,74 +1,75 @@
{
"name": "railbird-rn",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "cp .env.development .env && expo start",
"start:android": "expo start --android",
"start:ios": "expo start --ios",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"lint": "eslint . --ext .js,.ts,.tsx",
"lint:fix": "eslint . --ext .ts,.tsx --fix",
"test": "jest --forceExit"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
]
},
"dependencies": {
"@apollo/client": "^3.8.8",
"@react-native-camera-roll/camera-roll": "^7.4.0",
"@react-native-firebase/app": "^18.8.0",
"@react-native-firebase/auth": "^18.8.0",
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
"@types/react": "~18.2.14",
"@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0",
"babel-plugin-inline-dotenv": "^1.7.0",
"d3-path": "^3.1.0",
"d3-scale": "^1.0.6",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.1.0",
"expo": "~49.0.15",
"expo-build-properties": "^0.11.0",
"expo-constants": "~14.4.2",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"graphql": "^16.8.1",
"jest": "^29.2.1",
"jest-expo": "~49.0.0",
"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-dotenv": "^3.4.9",
"react-native-dropdown-picker": "^5.4.6",
"react-native-reanimated": "^3.6.2",
"react-native-safe-area-context": "^4.8.2",
"react-native-screens": "~3.22.0",
"react-native-static-safe-area-insets": "^2.2.0",
"react-native-svg": "13.9.0",
"react-native-svg-charts": "^5.4.0",
"typescript": "^5.3.3"
},
"devDependencies": {
"typescript": "^5.3.3",
"@babel/core": "^7.20.0",
"@react-native/metro-config": "^0.72.9",
"@testing-library/jest-native": "^5.4.3",
"@testing-library/react-native": "^12.4.3",
"@types/d3-path": "^3.0.2",
"@types/jest": "^29.5.11",
"@types/react-native-svg-charts": "^5.0.16",
"eslint-config-prettier": "^9.1.0",
"metro-react-native-babel-preset": "^0.77.0"
},
"private": true
"name": "railbird-rn",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "cp .env.development .env && expo start",
"start:android": "expo start --android",
"start:ios": "expo start --ios",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"lint": "eslint . --ext .js,.ts,.tsx",
"lint:fix": "eslint . --ext .ts,.tsx --fix",
"test": "jest --forceExit"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
]
},
"dependencies": {
"@apollo/client": "^3.8.8",
"@react-native-camera-roll/camera-roll": "^7.4.0",
"@react-native-firebase/app": "^18.8.0",
"@react-native-firebase/auth": "^18.8.0",
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
"@types/react": "~18.2.14",
"@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0",
"babel-plugin-inline-dotenv": "^1.7.0",
"d3-path": "^3.1.0",
"d3-scale": "^1.0.6",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.1.0",
"expo": "~49.0.15",
"expo-build-properties": "^0.11.0",
"expo-constants": "~14.4.2",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"graphql": "^16.8.1",
"jest": "^29.2.1",
"jest-expo": "~49.0.0",
"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#db82f66c5d3600d90f09c813f71287e176dc078b",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-dotenv": "^3.4.9",
"react-native-dropdown-picker": "^5.4.6",
"react-native-reanimated": "^3.6.2",
"react-native-safe-area-context": "^4.8.2",
"react-native-screens": "~3.22.0",
"react-native-static-safe-area-insets": "^2.2.0",
"react-native-svg": "13.9.0",
"react-native-svg-charts": "^5.4.0",
"typescript": "^5.3.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@react-native/metro-config": "^0.72.9",
"@testing-library/jest-native": "^5.4.3",
"@testing-library/react-native": "^12.4.3",
"@types/d3-path": "^3.0.2",
"@types/jest": "^29.5.11",
"@types/react-native-svg-charts": "^5.0.16",
"eslint-config-prettier": "^9.1.0",
"metro-react-native-babel-preset": "^0.77.0",
"prettier-plugin-organize-imports": "^3.2.4",
"typescript": "^5.3.3"
},
"private": true
}