https://supertokens.com/ logo
Join Discord
Powered by
I still dont get why it doesnt work
# support-questions
l
I still dont get why it doesnt work
r
I still dont get why it doesnt work
Cause you haven’t put it inside supertokens.init
Just doing session.init on its own without doing supertokens.init doesn’t work
l
supertokens as in 
supertokens-auth-react
?
r
Yes.
Please see our docs 🙂
l
I did^
r
Can you show me the full code?
l
Copy code
ts
import * as stAuth from 'supertokens-auth-react';
import { frontendConfig } from '@/constants/supertokens';
import * as stSessions from "supertokens-auth-react/recipe/session";
r
Session.init has to go inside supertokens.init. In the recipeList config
Please see our docs. This is a fairly simple problem to solve on your own 🙂
l
this one?
r
Yup
l
Yup I did
still no luck
r
Are you using NextJS?
l
yup I am using nextjs yes^
r
You need to make sure that the sessionAuth wrapper is not rendered during SSR
l
Yup I did that by dynamically loading the component
r
if u see the NextJS session In the docs, and then the page for protecting a website route, it will@show you how it’s done
l
still no luck
Copy code
ts
const SessionAuthNoSSR = dynamic(
    new Promise<any>((res) =>
        res(SessionRecipe.SessionAuth)
    ),
    { ssr: false }
)

return (
  <SessionAuthNoSSR>
    the ui here
  </SessionAuthNoSSR>
)
r
Then it probably means that you are not initialising supertoeks before the first render
l
I made sure it did
hold on
the initialize is called before the component is rendered
r
When do you call the initlialize function?
l
in _app.tsx
at top level
r
Hmm
l
Copy code
ts
if (typeof window !== 'undefined') {
  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
  initialize()
}

export function app etc.
r
And what’s the error you get?
Also, you don’t need to do stSession.init again after calling supertoeks.init
l
ahhh I see
let me try to remove it
nope still doesnt work
r
What’s the error?
l
no error, just that 
useSessionContext()
doesSessionExist returns false
when I call 
doesSessionExist()
manually, it returns true (the correct one)
r
Oh right.. where do u call useSessionContext?
In the child component that wraps the seesionAurhWrappet?
l
Copy code
ts
const SessionAuthNoSSR = dynamic(
    new Promise<any>((res) =>
        res(SessionRecipe.SessionAuth)
    ),
    { ssr: false }
)



const App = ({ dataProps }) => {
    const router = useRouter()
let a = useSessionContext();
    useEffect(() => {
        console.log(a)
        // if (!doesSessionExist) {
        //     console.warn('session does not exist, returning.')
        //     router.replace('/auth')
        // }
    }, [a])

return (
        <SessionAuthNoSSR>
            {(() => {
                console.log('init supertokens first')
            })()}
            -- more stuff here --
        </SessionAuthNoSSR>
)
}
r
Right ya. So you should use useSessionContext only inside a component that’s wrapped with SessionAuthNoSSR component
l
So I should rewrap the app component?
let me try that rq
r
You could.
But that would mean ur entire app wouldn’t be server side rendered. Is that’s ok, then you can wrap the whole app
l
hmm
Is there any alternatives for my app to be server-side-rendered and still for supertokens to work?
r
You could use doesSessionExist with useEffect for pages you want server side rendered
l
I meann currently I dont use server-side-rendering since im building a messaging app
r
Then you can wrap your whole app with SessionAuthNoSSR and it will be fine
l
in 
_app.tsx
?
r
Yea. U could
l
sure let me give that a shot
it does work now oh wow
This can do for the mean time
thank you so much for your help!!^
2 Views
PreviousNext
Powered by