useSession not returns on first render ? #4437

tphuc · 2022-04-21T13:59:21Z

tphuc
Apr 21, 2022

 let { data,  status } = useSession({
    // required: true,
 });

console.log(status)

After successfully login the status returns loading, unauthenticated. As soon as I refocus the window, the status changed to authenticated.

Here is my setup:

export default NextAuth({
    // Configure one or more authentication providers
    providers: [

        // ...add more providers here
        CredentialsProvider({
            id: "credentials",
            // The name to display on the sign in form (e.g. "Sign in with...")
            name: "Credentials",
            type: "credentials",
            // The credentials is used to generate a suitable form on the sign in page.
            // You can specify whatever fields you are expecting to be submitted.
            // e.g. domain, username, password, 2FA token, etc.
            // You can pass any HTML attribute to the <input> tag through the object.
            credentials: {
                email: { label: "email", type: "text", },
                password: { label: "Password", type: "password" }
            },
            async authorize(credentials, req) {
                // Add logic here to look up the user from the credentials supplied
                const { email, password } = credentials;
                let res = await axios.post(`${baseUrl}/auth/login`, {
                    email,
                    password
                })
                let user = res.data?.data;
                if (user?.access_token) {
                    return user
                } else {
                    return null
                }
            }
        })
    ],
    pages: {
        signIn: '/login',
        signOut: '/sign-up',
        error:'/login'
    },
    callbacks: {
        async jwt({ token, user, account, isNewUser }) {
            if (user) {
                token.accessToken = user.access_token
            }
            console.log('jwt: token, user, account \n', token,user, account)
            return token;
        },

        // That token store in session
        session: async ({ session, user, token, }) => { // this token return above jwt()
            session.accessToken = token.accessToken;
            return session;
        },
    },
})

Answered by tphuc

Apr 27, 2022

I found the problem. Was wrapping SessionProvider by getLayout:

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(
             <SessionProvider session={session} refetchOnWindowFocus={true}>
                <Component {...pageProps} />
              </SessionProvider>
    )}

Solution:

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const getLayout = Component.getLayout || ((page) => page)

  return <SessionProvider session={session} refetchOnWindowFocus={true}>
          {getLayout(
            <Component {...pageProps} />
          )}
  </SessionProvider>
}

View full answer

tphuc · 2022-04-27T10:38:58Z

tphuc
Apr 27, 2022
Author

I found the problem. Was wrapping SessionProvider by getLayout:

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(
             <SessionProvider session={session} refetchOnWindowFocus={true}>
                <Component {...pageProps} />
              </SessionProvider>
    )}

Solution:

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const getLayout = Component.getLayout || ((page) => page)

  return <SessionProvider session={session} refetchOnWindowFocus={true}>
          {getLayout(
            <Component {...pageProps} />
          )}
  </SessionProvider>
}

1 reply

fbryo21 Oct 6, 2022

My solution is more simple, followed with NextJs +Material UI Documentation:

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

export default function MyApp(props: AppPropsWithLayout & MyAppProps) {
  const { Component, pageProps: { session, ...pageProps }, emotionCache = clientSideEmotionCache } = props;

  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

  return (
    <SessionProvider session={session}>
      <CacheProvider value={emotionCache}>
        <Head>
          <meta name="viewport" content="initial-scale=1, width=device-width" />
        </Head>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          {getLayout(
            <Component {...pageProps} />
          )}
        </ThemeProvider>
      </CacheProvider>
    </SessionProvider>
  );
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

useSession not returns on first render ? #4437

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

useSession not returns on first render ? #4437

Uh oh!

Uh oh!

tphuc Apr 21, 2022

Replies: 1 comment · 1 reply

Uh oh!

tphuc Apr 27, 2022 Author

Uh oh!

fbryo21 Oct 6, 2022

tphuc
Apr 21, 2022

Replies: 1 comment 1 reply

tphuc
Apr 27, 2022
Author