The Google OAuth profile response is lacking the Profile ID - NextAuth

I've been diving into a helpful tutorial on implementing roles in the next-auth session. However, I've encountered an issue where adding the profile property results in unexpected behavior with the profile being undefined. Additionally, there are typescript errors cropping up. I'm not sure if this is a mistake on my end or a known bug, as my search didn't yield any relevant results.

Here's an excerpt of my code:

export const authOptions: AuthOptions = {
  secret: process.env.NEXT_PUBLIC_SECRET!,
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      // profile: async (profile) => {
      //   return { ...profile, role: profile.role ?? Role.USER };
      // },
    }),
  ],
  pages: {
    signIn: "/",
  },

  adapter: PrismaAdapter(prisma),
};

It mirrors the code from the tutorial, and upon commenting out the profile section, the behavior aligns with my expectations, albeit without the role feature. Any insights or assistance would be greatly appreciated!

Next.js Version: 13.4.1 (app directory)

typescriptnext.jsprismanext-autht3

Answer №1

By simply adding "id: profile.sub" to my GoogleProvider, I was able to eliminate any errors.

GoogleProvider({
            clientId: process.env.GOOGLE_ID,
            clientSecret: process.env.GOOGLE_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code"
                }
            },
            async profile(profile) {

                return {
                    id: profile.sub,
                    name: profile.name,
                    firstname: profile.given_name,
                    lastname: profile.family_name,
                    email: profile.email,
                    image: profile.picture,
                }
            },
        }),

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

What causes the error when I use "use client" at the top of a component in Next.js?

Whenever I include "use client" at the top of my component, I encounter the following error: event - compiled client and server successfully in 2.5s (265 modules) wait - compiling... event - compiled client and server successfully in 932 ms (265 modules) ...

javascriptnode.jsreactjsnext.jsnext.js13

The output is displayed on the console, but it cannot be stored in a variable

var x = ""; Promise.all(listOfItems).then(function(results) { for (let j in results) { var newitem = results[j]; x = newitem; console.log(`x: ${x}`); } }); The output on the console displays x: "val ...

asynchronoustypescriptconsole.log

TS - decorator relies on another irrespective of their position within the class

Is it possible to consistently run function decorator @A before @B, regardless of their position within the class? class Example { @A() public method1(): void { ... } @B() public method2(): void { ... } @A() public method3(): void { ... } } In the sc ...

typescriptdecoratortypescript-decorator

Using React to iterate over an array of objects and generate Date TextFields in Material UI

I have an array of objects representing different stages in a specific process, each stage identified by an id and name. The structure of the array is as follows: const stages = [ { id: 1, name: initialize }, { id: 2, name: execute ...

javascriptreactjstypescriptreact-nativereact-hooks

Using Angular to bind a click event to an element after it has been compiled

I am currently developing an application for students using Angular 5. In this application, users can access and view various documents. When a user enters a document, a set of tools, including a marker tool, are displayed. This marker tool allows users to ...

angulartypescript

The router.push function does not properly redirect to the specified path; instead, it just reloads the current page

I am a newcomer to NextJS and facing a challenge where I need to transfer data from the current page to another page. However, instead of loading the defined path in router.push as pathname: "/booking/checkout/", it loads the current page. I wan ...

javascriptreactjsnext.jsbootstrap-5

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

javascripttypescriptwebpack

The data type is expanding to encompass the entire enumeration

Within the provided code snippet, if the 'as' keyword is omitted in each action, the inferred type for method widens to any of the Kind types. Is there a way to prevent having to repeat 'Kind.PAYPAL as Kind.PAYPAL'? enum Kind { CAS ...

typescript

Generating a UTC timestamp in TypeScript

I am currently facing an issue with my application where I need to ensure that it always uses UTC time, regardless of the system time. I have a method in place to create a date: public static createDate(date: Date = new Date()): Date { return new Dat ...

typescriptdatedatetimeutcdate-formatting

Having trouble resolving a missing dependency warning with the useEffect React Hook in my Next.js app. Any tips on how to fix this

Currently, I'm facing the following warning: Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array Here is the code snippet from _app.js that seems to be causing this issue: cons ...

javascriptreactjsnext.js

Can the return value of a function be directly used as the variable type?

Imagine having the following function: let getData = () => { return { name: 'John', age: 2, isAsian: true } } Is there a way to specify a variable's type as the return type of getData, without assigning i ...

typescripttypescript2.0

Navigating conflicts between packages that utilize TypeScript can be tricky. Here are some strategies for handling these situations

I recently encountered an issue while following a tutorial to create a WhatsApp clone using Meteor. The tutorial link is here The problem arose at the end of section 8 when I executed the $meteor reset command as directed. However, upon running the $ n ...

node.jsangulartypescriptnpmmeteor

The Relationship Between Typing Variables and Generic Types in Functions

I need help implementing a specific function type: type TestType<T extends HTMLElement> = (input: T) => React.Ref<T>; I have a variable that I want to be typed with the above type for strict type guarantees on the return type: const Test ...

typescript

Overlap with upper picture formatting

I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this? Note: The layout should have 2 images, one at the top and another as a small book cover. Check out this sample on St ...

cssangulartypescriptsassionic3

Upon receiving the API response, my Angular webpage is failing to redirect to a different page

After executing my code in TypeScript, I encountered an issue with the updateProduct method calling the API to update a product based on form values. The update functionality works fine, but afterwards, I am receiving the following error: error: SyntaxErr ...

angulartypescript

Verify in Typescript if there is at least one value supplied

Looking for a solution: function takeOneOfOrThrow(firstOptionalVariable : string | undefined, secondOptionalVariable : string | undefined) { let result : string; if (!firstOptionalVariable && !secondOptionalVariable) { throw new E ...

typescript

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...

javascriptexpressnext.jsaes

What are some ways to handle component state within Next.js?

I need help creating a component that will monitor and update the text entered by the user in an input field, triggering a method when the text changes. My initial plan was to store the input's value in state, but I am encountering an issue with this ...

reactjsnext.js

String validation using regular expressions

Below is the code I am using to validate a string using regular expressions (RegEx): if(!this.validate(this.form.get('Id').value)) { this.showErrorStatus('Enter valid ID'); return; } validate(id) { var patt = new RegExp("^[a-zA- ...

javascriptregexangularvalidationtypescript

Issue with exporting Typescript React component

Despite searching for answers, none of the related questions have been helpful... My goal is to export React components from a TypeScript library that I plan to publish on npm. For testing purposes before publishing, I am utilizing npm link. The structu ...

javascriptreactjstypescriptnpmwebpack