https://supertokens.com/ logo
Channels
Powered by
#support-questions
Title
# support-questions
l

lavenderlav

04/30/2022, 4:01 PM
I still dont get why it doesnt work
r

rp

04/30/2022, 4:02 PM
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

lavenderlav

04/30/2022, 4:03 PM
supertokens as in 
supertokens-auth-react
?
r

rp

04/30/2022, 4:03 PM
Yes.
Please see our docs 🙂
l

lavenderlav

04/30/2022, 4:03 PM
I did^
r

rp

04/30/2022, 4:03 PM
Can you show me the full code?
l

lavenderlav

04/30/2022, 4:03 PM
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

rp

04/30/2022, 4:03 PM
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

lavenderlav

04/30/2022, 4:04 PM
this one?
r

rp

04/30/2022, 4:04 PM
Yup
l

lavenderlav

04/30/2022, 4:05 PM
Yup I did
still no luck
r

rp

04/30/2022, 4:05 PM
Are you using NextJS?
l

lavenderlav

04/30/2022, 4:05 PM
yup I am using nextjs yes^
r

rp

04/30/2022, 4:05 PM
You need to make sure that the sessionAuth wrapper is not rendered during SSR
l

lavenderlav

04/30/2022, 4:06 PM
Yup I did that by dynamically loading the component
r

rp

04/30/2022, 4:06 PM
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

lavenderlav

04/30/2022, 4:06 PM
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

rp

04/30/2022, 4:06 PM
Then it probably means that you are not initialising supertoeks before the first render
l

lavenderlav

04/30/2022, 4:07 PM
I made sure it did
hold on
the initialize is called before the component is rendered
r

rp

04/30/2022, 4:08 PM
When do you call the initlialize function?
l

lavenderlav

04/30/2022, 4:08 PM
in _app.tsx
at top level
r

rp

04/30/2022, 4:09 PM
Hmm
l

lavenderlav

04/30/2022, 4:09 PM
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

rp

04/30/2022, 4:09 PM
And what’s the error you get?
Also, you don’t need to do stSession.init again after calling supertoeks.init
l

lavenderlav

04/30/2022, 4:10 PM
ahhh I see
let me try to remove it
nope still doesnt work
r

rp

04/30/2022, 4:11 PM
What’s the error?
l

lavenderlav

04/30/2022, 4:11 PM
no error, just that 
useSessionContext()
doesSessionExist returns false
when I call 
doesSessionExist()
manually, it returns true (the correct one)
r

rp

04/30/2022, 4:12 PM
Oh right.. where do u call useSessionContext?
In the child component that wraps the seesionAurhWrappet?
l

lavenderlav

04/30/2022, 4:13 PM
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

rp

04/30/2022, 4:13 PM
Right ya. So you should use useSessionContext only inside a component that’s wrapped with SessionAuthNoSSR component
l

lavenderlav

04/30/2022, 4:14 PM
So I should rewrap the app component?
let me try that rq
r

rp

04/30/2022, 4:14 PM
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

lavenderlav

04/30/2022, 4:14 PM
hmm
Is there any alternatives for my app to be server-side-rendered and still for supertokens to work?
r

rp

04/30/2022, 4:15 PM
You could use doesSessionExist with useEffect for pages you want server side rendered
l

lavenderlav

04/30/2022, 4:16 PM
I meann currently I dont use server-side-rendering since im building a messaging app
r

rp

04/30/2022, 4:17 PM
Then you can wrap your whole app with SessionAuthNoSSR and it will be fine
l

lavenderlav

04/30/2022, 4:17 PM
in 
_app.tsx
?
r

rp

04/30/2022, 4:17 PM
Yea. U could
l

lavenderlav

04/30/2022, 4:18 PM
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!!^
Powered by