Hi all, trying to wrap a component to show a logged in avatar or not in a navigation bar in NextJS. I am trying to use this in the component code, but whether I'm logged in or not, it doesn't change anything. Any help/pointers is appreciated.

import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
import { PlusSmIcon } from '@heroicons/react/solid'
import { ThirdPartyEmailPasswordAuth } from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import { Profiler } from 'react/cjs/react.production.min';

function Profile() {
  return (
    <ThirdPartyEmailPasswordAuth requireAuth={true}>
        Profile Icon
    </ThirdPartyEmailPasswordAuth>
  )
}

export default Profile;

Are you getting an error? Or is it just showing the child content all the time?

Not getting an error. Just seems to keep showing the child object (Profile Icon) text all the time. Even when I explicitly logout.

Hmm. So normally that component should redirect the user to the login page if you are not logged in. Do you see any console error?

Oh I see. I don't see any errors. I guess that wasn't my intent anyways. I wanted to show like a logged in avatar in the navbar if logged in.

Yea. Give me 15 mins please. I’ll write up so code here to do that.

Oh awesome, thank you.

hey @User , so the way to do this is as below:

import React from 'react'
import dynamic from 'next/dynamic'
import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
import ProtectedPage from "./protectedPage";

const ThirdPartyEmailPasswordAuthNoSSR = dynamic(
  new Promise((res) =>
    res(ThirdPartyEmailPassword.ThirdPartyEmailPasswordAuth)
  ) as any,
  { ssr: false }
)

export default function Home() {
  return (
    // we protect ProtectedPage by wrapping it
    // with ThirdPartyEmailPasswordAuthNoSSR

    <ThirdPartyEmailPasswordAuthNoSSR requireAuth={false}>
      <ProfileComponent />
    </ThirdPartyEmailPasswordAuthNoSSR>
  )
}

Then in

ProfileComponent

, you need to use the sessionContext to query if a session exists or not like shown here: https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/sessions/checking-session-front-end#step-2-this-is-how-to-use-the-session-context-in-a-component Note that we are using NextJS'

dynamic

HOC here, which means that

<ProfileComponent />

will not be rendered on the server side, and only on the client side.

Thank you. Trying this out now. Couple questions, so since this is client side, it would still be able to take advantage of SEO with the page using getStaticProps() right?

> Couple questions, so since this is client side, it would still be able to take advantage of SEO with the page using getStaticProps() right? I'm not entirely familiar with

getStaticProps

. Sorry > Also, I'm thinking of just returning an empty fragment in the case the session doesn't exist? As I don't need to show anything. Yea. That works. > Does wrapping with have too much overhead? I am doing it in _app as my navbar is loaded up in _app Nope. It doesn't. Unless you have enabled email verification. In which case it does an API call each time the page will be loaded to check if the email is verified. Depending on where the frontend and backend are, this can take ~ 600ms (but takes ~20ms if the backend is close) to query the backend. But it shouldn't affect any of the other parts of the page. We are working on optimising this, in the meantime, you can see this comment: https://github.com/supertokens/supertokens-core/issues/380#issuecomment-1053906292

Got it thank you. It looks like I may have email verification enabled, but will double check.

Alright! Test it out first though.. it may just work well.

Actually do I even need to do the wrap with the

ThirdPartyEmailPasswordAuthNoSSR

? Can I just check the session instead?

You can. But it's easiest to do it via the wrapper component. Otherwise you will have to use

useEffect

etc to do that..

Ok thank you.