Set dev mode auth headers
This commit is contained in:
parent
e69f9dc2d8
commit
fc3cf92dcf
@ -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
16
App.tsx
@ -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>
|
||||
);
|
||||
|
@ -1,3 +1,4 @@
|
||||
declare module "@env" {
|
||||
export const API_URI: string;
|
||||
export const DEV_USER_ID: string;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -59,7 +59,6 @@
|
||||
"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",
|
||||
@ -68,7 +67,9 @@
|
||||
"@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"
|
||||
"metro-react-native-babel-preset": "^0.77.0",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user