How to get Auth0 User object in getServerSideProps?

user_7913631 0
Viewed 2125

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: enter image description here

auth0 server-side-rendering typescript next.js javascript
2 Answers

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

user_82801120

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,
      },
    };
  },
});
user_9710850
Related