0
166
VistasHow to get Auth0 User object in getServerSideProps?
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:
2 Respuestas
Responde la pregunta0
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
0
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,
},
};
},
});