Replies: 1 comment
-
|
The core issue you're hitting is that Authgear's SDK uses The solution: isolate the Authgear initialization into a dedicated client component, then import that into your layout without making the layout itself a client component. // app/components/AuthgearProvider.tsx
'use client';
import { useEffect } from 'react';
import authgear from '@authgear/web';
export default function AuthgearProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
authgear.configure({
endpoint: process.env.NEXT_PUBLIC_AUTHGEAR_ENDPOINT!,
clientID: process.env.NEXT_PUBLIC_AUTHGEAR_CLIENT_ID!,
sessionType: 'refresh_token',
});
}, []);
return <>{children}</>;
}Then in your root layout (which stays a Server Component): // app/layout.tsx
import AuthgearProvider from './components/AuthgearProvider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<AuthgearProvider>
{children}
</AuthgearProvider>
</body>
</html>
);
}This way:
The |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Beta Was this translation helpful? Give feedback.
All reactions