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] [*.tsx]
indent_style = tab indent_style = tab
indent_size = 2
[*.ts]
indent_style = tab
indent_size = 2
[*.json] [*.json]
end_of_line = lf end_of_line = lf
charset = utf-8 charset = utf-8
indent_style = space indent_style = tab
indent_size = 2 indent_size = 2
trim_trailing_whitespace = true trim_trailing_whitespace = true
insert_final_newline = true insert_final_newline = true

16
App.tsx
View File

@ -1,10 +1,24 @@
import React from "react"; import React from "react";
import AppNavigator from "./navigation/app-navigator"; 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 = () => { const App: React.FC = () => {
return ( return (
<ClientProvider> <ClientProvider>
<SetAuthHeaderBasedOnEnv />
<AppNavigator /> <AppNavigator />
</ClientProvider> </ClientProvider>
); );

View File

@ -1,3 +1,4 @@
declare module "@env" { declare module "@env" {
export const API_URI: string; 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 { import {
ApolloClient, ApolloClient,
ApolloLink, ApolloLink,
@ -13,31 +19,33 @@ type Props = {
children: ReactNode; children: ReactNode;
}; };
const AuthHeaderContext = createContext(); export const AuthHeaderContext = createContext<
| {
export const AuthHeaderProvider = ({ children }) => { authHeader: { key: string; value: string };
const [authHeader, setAuthHeader] = useState({ key: "", value: "" }); setAuthHeader: React.Dispatch<
React.SetStateAction<{ key: string; value: string }>
return ( >;
<AuthHeaderContext.Provider value={{ authHeader, setAuthHeader }}> }
{children} | undefined
</AuthHeaderContext.Provider> >(undefined);
);
};
// Hook to use the auth header context // 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({ const httpLink = new HttpLink({
uri: API_URI, uri: API_URI || "https://api-dev.railbird.ai/graphql",
}); });
const cache = new InMemoryCache({}); const cache = new InMemoryCache({});
const { authHeader } = useAuthHeader();
const authMiddleware = new ApolloLink((operation, forward) => { const authMiddleware = new ApolloLink((operation, forward) => {
// Retrieve auth key and value from context
const { key, value } = authHeader; const { key, value } = authHeader;
if (key && value) { if (key && value) {
@ -55,13 +63,16 @@ const ClientProvider: React.FC<Props> = ({ children }) => {
const client = useMemo( const client = useMemo(
() => () =>
new ApolloClient({ 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(), cache: new InMemoryCache(),
}), }),
[authHeader], [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

@ -59,7 +59,6 @@
"typescript": "^5.3.3" "typescript": "^5.3.3"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5.3.3",
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",
"@react-native/metro-config": "^0.72.9", "@react-native/metro-config": "^0.72.9",
"@testing-library/jest-native": "^5.4.3", "@testing-library/jest-native": "^5.4.3",
@ -68,7 +67,9 @@
"@types/jest": "^29.5.11", "@types/jest": "^29.5.11",
"@types/react-native-svg-charts": "^5.0.16", "@types/react-native-svg-charts": "^5.0.16",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"metro-react-native-babel-preset": "^0.77.0" "metro-react-native-babel-preset": "^0.77.0",
"prettier-plugin-organize-imports": "^3.2.4",
"typescript": "^5.3.3"
}, },
"private": true "private": true
} }