< rp st> I am trying to integrate Supertokens with Next JS 1 SuperTokens.com #general

<@498057949541826571> I am trying to integrate Sup...

flameslayer

09/24/2023, 10:07 AM

@rp_st I am trying to integrate Supertokens with Next JS 13. Looks like to initialise

SuperTokensWrapper

in the root layout, root layout should be made a client component. But that just destroys the whole purpose of server components. Any workaround around it?

Copy code

js
'use client'
import SuperTokensReact, { SuperTokensWrapper } from 'supertokens-auth-react'
import { frontendConfig } from '../config/frontendConfig'

if (typeof window !== 'undefined') {
  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
  SuperTokensReact.init(frontendConfig())
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <SuperTokensWrapper>
        <body suppressHydrationWarning={true}>{children}</body>
      </SuperTokensWrapper>
    </html>
  )
}

ja3nyc

09/24/2023, 3:19 PM

I'm not RP but if you make the Supertokenswrapper into a provider you can remove the 'use client' from the root layout. For example this is what I have: __File Structure__

Copy code

app
|_  layout.tsx
|_  Providers.tsx

__Code Example__ Providers.tsx

Copy code

typescript
'use client'

import SuperTokensReact, { SuperTokensWrapper } from 'supertokens-auth-react'
import { frontendConfig } from '../config/frontendConfig'

if (typeof window !== 'undefined') {
    // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
    SuperTokensReact.init(frontendConfig())
    console.log("supertokens initialized")
  } 

export default function SuperTokenProvider({
    children,
  }: {
    children: React.ReactNode
  }) {
    return(
    <SuperTokensWrapper>
        {children}
    </SuperTokensWrapper>
    )
  }

layout.tsx

Copy code

typescript
import './css/style.css'

import { Inter } from 'next/font/google'

import SuperTokenProvider from './Providers'


const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap'
})



export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
    
  return (
    <html lang="en">
      <SuperTokenProvider>
        <body className={`${inter.variable} font-inter antialiased bg-white-900 text-black-900 tracking-tight`}>
          <div className="flex flex-col min-h-screen overflow-hidden">
            {children}
          </div>
        </body>
      </SuperTokenProvider>
    </html>
  )
}

ja3nyc

09/24/2023, 3:19 PM

@flameslayer

flameslayer

09/25/2023, 11:17 AM

got it, awesome Thansk @ja3nyc !!

Previous Next