11

I cant use getSession() in getServerSideProps with HTTPS.

is it normal? I try many times.

I will get it if use HTTPS . I cant getSession() in getServerSideProps

__Secure-next-auth.callback-url
__Secure-next-auth.session-token
__Host-next-auth.csrf-toke

if use HTTP and I can getSession() in getServerSideProps is Okay

next-auth.callback-url
next-auth.session-token
next-auth.csrf-token

how can I fixed it on HTTPS getSession() in getServerSideProps?

I run the same code on http or https for test

if run with http, I can get the props.session if run with https, I cannot get the props.session

import { getSession } from 'next-auth/client';

export default function Home(props) {
  console.log(props.session);
  return (
    <div>
      <h1>Server Side Rendering</h1>
    </div>
  );
}
export async function getServerSideProps(context) {
  return {
    props: {
      session: await getSession(context),
    },
  };
}

remark：

  1. I had set the NEXTAUTH_URL in .env
  2. I know I can get getSession() in getInitialProps But I need get session.user.id to fetch database with prisma, the same time prisma need run in getServerSideProps
scxsk0992
  • 147
  • 1
  • 1
  • 8
  • Have you configured a `NEXTAUTH_URL` environment variable? From memory that controls which protocol to use. https://next-auth.js.org/configuration/options#nextauth_url – razboy Aug 26 '21 at 15:43
  • @razboy sure,I tried if set `NEXTAUTH_URL=http://localhost:3000` and run with HTTP, everything is ok. But if set `NEXTAUTH_URL=https://localhost:3000` and run with HTTPS. I cant get any session in `getServerSideProps` – scxsk0992 Aug 26 '21 at 15:45
  • Ah, I don't think Next.js will run SSL locally. You may need to run a proxy in front of it or configure a custom server. Http should be ok for local testing. Perhaps you can deploy somewhere to do the https test. – razboy Aug 26 '21 at 15:49
  • Just a demo. Because I'm testing on my production custom server, so I need to run with SSL . – scxsk0992 Aug 26 '21 at 15:54

2 Answers2

21

This behaviour is normal. The values are internal to next-auth. When NEXTAUTH_URL is prefixed with https, cookies will be marked as secure. You can see the behaviour here:

https://github.com/nextauthjs/next-auth/blob/543f812eb32448044d2aa725b623ca1dedbb68a3/src/lib/jwt.js#L115

Internally next-auth will handle session irrespective of http or https.

To configure client-side session you can follow the examples in the documentation:

A complete working example here:

First configure a provider in order to share session between your components.

pages/_app.js

import { Provider } from "next-auth/client"

export default function App({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

If you need to support authentication during server side rendering as well, you will need.

pages/index.js

import { getSession } from "next-auth/client"

export async function getServerSideProps(ctx) {
  return {
    props: {
      session: await getSession(ctx)
    }
  }
}

Inside your components use the react hook provided by next-auth

import { useSession } from "next-auth/client"

export default function Component() {
  const [session, loading] = useSession()

  if (session) {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

And in the api routes on the server side:

import { getSession } from "next-auth/client"

export default async (req, res) => {
  const session = await getSession({ req })
  res.end()
}
razboy
  • 978
  • 7
  • 15
0

With "next 13.3.4", "next-auth 4.22.1" "react 18.2.0" the following seems to work:

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { findUser } from '@/lib/prisma';

export default function Example({ profile: user }:
    InferGetServerSidePropsType<typeof getServerSideProps>)
{
    if (!user) {
        return (
            <>
            <h1>Server-Error</h1>
            <p>Please try again later.</p>
            </>
        )
    }
    //...
    return (
        <>
        <h1>Profile {user.firstname}</h1>
        </>
    );
}

type ProfileSettings = {
    firstname: string,
    middlename: string | null,
    lastname: string,
    nickname: string | null,
    email: string,
};

type ProfileData = {
    profile: ProfileSettings | null
};

export const getServerSideProps:GetServerSideProps<ProfileData> = async (context) => {
    var session = await getSession(context);
    var p: ProfileSettings|null = null;
    if (session?.user?.name) {
        let u = await findUser(session.user.name);
        if (u)
            p = {
                account: u.account,
                firstname: u.firstname,
                lastname: u.lastname,
                nickname: u.nickname,
                email: u.email
            };
    }
    return { props: { profile: p }};
}
jelmd
  • 119
  • 3