React children (e.g. your app or a layout).
TokenContext.Provider wrapping children.
// app/layout.tsx
import { AuthWrapper } from "naystack/auth/client";
import { ApolloWrapper } from "naystack/graphql/client";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<AuthWrapper>
<ApolloWrapper>{children}</ApolloWrapper>
</AuthWrapper>
</body>
</html>
);
}
Provider that fetches the current access token from your auth endpoint and exposes it via TokenContext. Wrap your app (or the part that needs auth) so that
useToken(),useLogin(),useSignUp(),useLogout()work. On mount it GETsNEXT_PUBLIC_EMAIL_AUTH_ENDPOINTwith credentials; the response'saccessTokenis stored and provided to children.Must be placed above
ApolloWrapperin the component tree (sinceApolloWrapperneeds the token).