https://supertokens.com/ logo
#support-questions
Title
# support-questions
r

risingryzen

02/28/2022, 4:46 AM
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.
Copy code
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;
r

rp

02/28/2022, 4:49 AM
Are you getting an error? Or is it just showing the child content all the time?
r

risingryzen

02/28/2022, 4:49 AM
Not getting an error. Just seems to keep showing the child object (Profile Icon) text all the time. Even when I explicitly logout.
I am running the app locally against the development supertokens server. Not sure if that makes a difference.
r

rp

02/28/2022, 4:51 AM
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?
r

risingryzen

02/28/2022, 4:53 AM
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.
Ah ok, I restarted my server and now see some errors. Error: SuperTokens must be initialized before calling this method.
This navbar component is embedded in _app so it may be getting used before initialization.
Do you know what's a good recommendation to do the above? Instead of redirecting, show certain components/parts in the UI if logged in? Should I check for a cookie client side ?
Its almost very similar functionality to supertokens.com how it shows either
Sign Up
button on the top right or if logged in it shows my
Username
.
r

rp

02/28/2022, 4:57 AM
Yea. Give me 15 mins please. I’ll write up so code here to do that.
r

risingryzen

02/28/2022, 4:57 AM
Oh awesome, thank you.
Sorry for the confusion, I guess the server I'm using doesn't have live reload hence I didn't see the errors before.
r

rp

02/28/2022, 5:20 AM
hey @User , so the way to do this is as below:
Copy code
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.
r

risingryzen

02/28/2022, 5:29 AM
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?
Ok awesome @User this worked out quite well. 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.
Copy code
function Profile() {
  let {doesSessionExist} = useSessionContext();
  if (doesSessionExist) {
      return(
        <div>
            Profile
        </div>
      )
  } else {
      return(
          <>
          </>
      )
  }
}
Does wrapping with
<ThirdPartyEmailPasswordAuthNoSSR requireAuth={false}>
have too much overhead? I am doing it in
_app
as my navbar is loaded up in
_app
r

rp

02/28/2022, 5:35 AM
> 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
r

risingryzen

02/28/2022, 5:38 AM
Got it thank you. It looks like I may have email verification enabled, but will double check.
r

rp

02/28/2022, 5:39 AM
Alright! Test it out first though.. it may just work well.
r

risingryzen

02/28/2022, 5:41 AM
Actually do I even need to do the wrap with the
ThirdPartyEmailPasswordAuthNoSSR
? Can I just check the session instead?
r

rp

02/28/2022, 5:42 AM
You can. But it's easiest to do it via the wrapper component. Otherwise you will have to use
useEffect
etc to do that..
If you still don't wanna use that HOC, then you can see 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, and then click on "Plain Javascript" tab to see what function to use.
r

risingryzen

02/28/2022, 5:48 AM
Ok thank you.
2 Views