What could be causing the User object in the auth0/nextjs useUser hook to have missing properties?

The user object retrieved using the useUser hook from auth0/nextjs package seems to be missing some important properties:

{
  "nickname": "example",
  "name": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedbc6dfd3ced2dbfec7dfd6d1d190ddd1d3">[email protected]</a>",
  "picture": "https://s.gravatar.com/avatar/ca48de58bbf91d5963aa…&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fal.png",
  "updated_at": "2022-05-19T13:13:29.487Z",
  "sub": "auth0|628639882896f400694b6e72"
}

It appears that important properties such as email are missing from the user object. Any assistance in resolving this issue would be greatly appreciated.

javascripttypescriptnext.jsauth0

Answer №1

You should consider updating your scopes.

For instance, in your [...auth0].js script, you can find the necessary information in /api/auth/me

import { handleAuth, handleLogin, handleProfile } from '@auth0/nextjs-auth0';


export default handleAuth({
  async login(req, res) {
    try {
      await handleLogin(req, res, {
        returnTo: '/api/auth/me',
        authorizationParams: {
          response_type: 'code',
          scope: 'openid profile email',
        }
      });

    } catch (error) {
      res.status(error.status || 400).end(error.message);
    }
    
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maintain Angular Dropdown Menu Open Across Page Refresh

I am currently working on an HTML/Typescript view that is connected to a SQL Database. Whenever there are changes made to the database, the entire webpage reloads. The issue we are facing is that we have dropdown menus on the page that clients want to rema ...

javascripthtmlsqlangulartypescript

What is the functionality of the disabled attribute on an option tag within a dropdown select menu?

I am working with a code snippet that involves understanding how the attribute:disabled functions on an <option> within a <select> element! Let's say I have a dropdown for ratings and I select the 5-star option (★★★★★). Upon sel ...

javascripthtmlbootstrap-5

Gulp does not generate any new folders

Currently, my workspace is located in a directory named "Super gulp" with other directories that contain my files. The issue I'm facing is related to converting my .pug files into HTML files and placing them in the "goal" directory. However, when I tr ...

javascriptnode.jsnpmgulpfrontend

Mastering the alignment of Material-UI Menu items

When using the menu and menu item components of material-ui to create a select dropdown menu, I encountered an unusual issue where the dropdown menu always expands to the left side of the box, as shown in the image below: https://i.stack.imgur.com/ykRrp.jp ...

javascriptcssreactjsmaterial-ui

Update your Electron application with the npm update command

I have recently published an app on a local npm repository, and this particular app serves as a crucial dependency for my second electron application. The electron app I am working on is structured around node_modules/my-first-app/dist/index.html. I am w ...

javascriptnode.jsnpmelectron

What is the best way to send data to a component through a slot?

Currently, I am working on a Vue application that utilizes pimcore and twig in the backend. My task involves creating a component that can receive another component (slot) and dynamically render it with props. Here is the root structure found in viani.twig ...

javascriptvue.jsvuejs2

Setting the default value for Angular Material's select component (mat-select)

Many inquiries are focused on setting a default value to display in a "Select" control. In this particular case regarding Angular 8 template driven forms, the issue lies in the inability to show the default value in the mat-select when the button is clicke ...

angulartypescriptangular-material

Tips for implementing a confirmation dialogue box prior to submitting a form:

As a new developer, I am facing an issue that I believe you can help me with. I want to display a confirmation box before deleting. How can I achieve this in my Ajax code? HTML: <input type='button' class="btn btn-danger delete_button" id="de ...

javascriptphpjqueryajaxwordpress

Using a form template to bind radio buttons and automatically populate fields based on the selected radio button

My form has three radio buttons. The first one is selected by default. The second one should display an input field conditionally upon clicking it, and when the third option is selected, it should populate that input field with a certain value. div> ...

angulartypescriptangular4-forms

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

Hello, I'm encountering an issue with angular-in-memory-web-api. I have attempted to use angular2-in-memory-web-api in SystemJS and other solutions, but without success. I am currently using the official quickstart template. Thank you for any assistan ...

javascriptapiangulartypescript

AngularJS allows users to import a file and submit it after closing the popup

I can't figure out how to submit the file I'm importing after clicking OK on the system's file upload window. Here is what I have tried so far: <input type="file" id="file-input" style="display:none" /> <button class="btn pull-ri ...

javascriptangularjs

Next.js encountered an error when trying to locate the 'net' module while working with PostgreSQL

I'm facing a challenge in my Next.js project while attempting to retrieve all records from a table. The error message I'm encountering is "Module not found: Can't resolve 'net'" with an import trace pointing to multiple files withi ...

reactjstypescriptnext.js13bun

Encountered error code 3228369023 while trying to establish a connection to a SQL Server database using Node.js with MSSQL

Currently in the process of setting up an API for a SQL Server Express database, my plan is to utilize mssql in Node.js with express to handle requests and communicate with the database. Despite trying several methods to establish a connection between my n ...

javascriptnode.jssql-serverexpressnpm

Refresh and append values to multiple select2 fields following an ajax request

I recently encountered an issue where I needed to add values to a select2 (multiple select) field after making an ajax call. In my quest for a solution, I came across this helpful question on Stack Overflow: Dynamically add item to jQuery Select2 control ...

javascriptjqueryajaxjquery-select2

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

javascriptjqueryhtmlinputdisabled-input

Obtaining attribute data value upon selection change in Angular 4

Having trouble retrieving the value from data-somedata in my code... <select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (change)="menuChange($event)"> <option *ngFor="let menu_optional of menu_optionals" value= ...

angulartypescript

Adjust the colors dynamically based on specific data within a loop

My task involves populating a table with data. Specifically, I am focusing on coloring the data in the first year column according to certain conditions. The desired outcome is as follows: +--------+------------+------+------+ | YEAR | 2022 | 2021 ...

angulartypescriptloopsdynamicng-class

Highcharts gauge removing unnecessary white borders

I have created a highchart gauge code that looks great on JSFiddle, but when I paste it into my website, the 'border' options (borderColor and borderWidth) don't seem to work. The browser automatically adds white borders to my series, toolti ...

javascripthtmlhighchartsgauge

The HTML table seems to be inexplicably replicating defaultValue values

I'm encountering an issue where, when I use JavaScript to add a new table data cell (td), it ends up copying the defaultValue and innerText of the previous td in the new cell. This is confusing to me because I am simply adding a new HTML element that ...

javascripthtmlreactjs

Assign a function in one class to be equivalent to a function in a different class

What is causing this issue and how should it be resolved? class A { constructor() { console.log('constructin A') } public someMethod = (x: string) => { console.log(x) } } class B { private myA: A constructor ...

javascripttypescript