How to get Auth0 User object in getServerSideProps?

Question

I am trying to use Auth0 with NextJS for user authentication. After login I want to access the user object in getServerSideProps. I followed this link below,

Stackoverflow however, when I try to paste the code typescript error is shown. I have attached code and error below. Please let me know how can this be resolved.

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

  export default withPageAuthRequired(function Profile({ user, newData }) {
    return (
      <>
        <div>{user.name}</div>
      </>
     )
   });

  export const getServerSideProps = withPageAuthRequired({ 

    async getServerSideProps (context){
      return {
         props: {
           newData: "user"
         }
       }
     }
   });

error code:

{
   "resource": "/Users/username/Downloads/proj/projectname/pages/profile.tsx",
   "owner": "typescript",
   "code": "2345",
   "severity": 8,
   "message": "Argument of type '{ getServerSideProps(context: any): Promise<{ props: { newData: string; }; }>; }' is not assignable to parameter of type 'ComponentType<WithPageAuthRequiredProps>'.\n  Object literal may only specify known properties, and 'getServerSideProps' does not exist in type 'ComponentType<WithPageAuthRequiredProps>'.",
   "source": "ts",
   "startLineNumber": 73,
   "startColumn": 11,
   "endLineNumber": 73,
   "endColumn": 29
}

Screenshot:

You're importing `withApiAuthRequired` but using `withPageAuthRequired` in the code, is that a typo? Could you show all the imports you're using from `@auth0/nextjs-auth0`? — juliomalves, Oct 03 '21 at 12:23
@juliomalves sorry typing mistake, I have updated the imports. — Sriharsha K, Oct 04 '21 at 01:13
Are you intentionally calling `withPageAuthRequired` twice by wrapping both getServerSideProps and `function Profile`? Don't you just need a single wrap function call? — Dejan Vasic, Oct 19 '21 at 10:41
@DejanVasic since I am using auth0 google login I wanted save those credentials in my database. Therefore, wanted to access the user object in serversideprops. — Sriharsha K, Oct 20 '21 at 01:11
@SriharshaK Using Google or whatever authentication mechanism in this should work without an additional call to `withPageAuthRequired`. I'll post some sample code that worked for me. BTW, I'm also using google auth as well as option for username/password. — Dejan Vasic, Oct 20 '21 at 02:39

score 4 · Answer 1 · edited May 03 '22 at 22:46

You have example here.

Based on you example:

import { getSession, withPageAuthRequired } from '@auth0/nextjs-auth0';

export default function ProtectedPage({user}) {
  return (
    <>
      <div>{user.name}</div>
    </>
  )
});

export const getServerSideProps = withPageAuthRequired({
  //returnTo: '/foo',
  async getServerSideProps(ctx) {
    const session = getSession(ctx.req, ctx.res);
    //check the console of backend, you will get tokens here
    console.log(session);
    return {props: {
      customProp: 'bar'
    }};
  }
});

Please notice the difference between getSession and {user}: you can define some actions as a "redirect to" in getServerSideProps. What does it mean? It means you can, for example, redirect users with no access to a custom page, for example, 404

P.S. you don't have context, you need to have ctx variable

context and ctx are just parameters , It doesn't matter what you call It. — Hussam Khatib, Nov 10 '21 at 11:47
It should be const session = await getSession(ctx.req, ctx.res); — Andrien Pecson, Feb 04 '23 at 16:02

Dejan Vasic · Answer 2 · 2021-10-20T02:58:40.060

You only need to wrap the getServerSideProps. Here's an example that worked for me:

import React, { ReactElement } from 'react';
import { getSession, withPageAuthRequired } from '@auth0/nextjs-auth0';

import db from '.';

interface Props {
  user: DbUser;   // Not the auth0 user
}

export default function Profile({ dbUser }: Props) {
  return <div>{JSON.stringify(dbUser, null, 2)}</div>;
};


export const getServerSideProps = withPageAuthRequired({
  getServerSideProps: async ({ req, res }) => {
    const auth0User = getSession(req, res);

    // Fetch the user from the db (by email)
    let user = await db.user.findUnique({ where: { email: auth0User?.user.email } });

    // You might want to move the creation of the user somewhere else like afterCallback
    // Checkout https://auth0.github.io/nextjs-auth0/modules/handlers_callback.html
    if (!user) {
      user = db.user.create(auth0User?.user);
    } 

    return {
      props: {
        dbUser: user,
      },
    };
  },
});

How to get Auth0 User object in getServerSideProps?

2 Answers2