I'm currently developing a NextJs application and I need to include the idToken in all backend calls. Is there an efficient method to implement this? Here's a simplified overview of our app structure:
We have a page:
/* src/pages/example/index.page.tsx */
export const getServerSideProps: GetServerSideProps<ExamplePageProps> = async (
context,
) => {
const initialTranslations = await getTranslations(context.locale, ['example']);
return {
props: {
initialTranslations,
},
};
};
export interface ExamplePageProps {
...
}
function ExamplePage(props: ExamplePageProps) {
return (
<MyComponent />
);
}
The component is as follows:
/* src/pages/components/MyComponent/MyComponent.tsx */
export const MyComponent: FC<MyComponentProps> = (...) => {
const handleClick = async () => {
await makeBackendCall(param1, param2);
}
...
<Button onClick={handleClick} />
...
}
The backend call is located here:
/* src/fetchers/webapi.ts */
export const makeBackendCall = (param1: string, param2: string): Promise<Response> => {
fetch('http://some.url', {
method: 'GET',
headers: {
/* *** THIS IS WHERE I NEED TO SEND idToken *** */
}
});
}
export const anotherCallWhichNeedsTheToken = () => {...}
export const andAnotherOne = () => {...}
/*...*/
How can I go about achieving this? Thus far, my closest attempt has been fetching it in getServerSideProps, like so:
import { getSession } from '@auth0/nextjs-auth0';
...
const session = getSession(context.req, context.res);
const idToken = session?.idToken;
...
return {
props: {
initialTranslations,
idToken,
},
};
...or more generally:
return {
props: {
initialTranslations,
session: getSession(context.req, context.res),
},
};
...but in either case, I encounter a compiler error with getServerSideProps, mentioning something about incompatible props (I believe it is related to returning a promise in getServerSideProps and specifying a "regular" object in component props, although I am uncertain).