Cannot Implement Roles with MongoDB and Google

[rajbirjohar]

Hi, I'd like to request some clarification on how to extend more data with Google OAuth and MongoDB for session.

This is my [...nextauth].ts:

import NextAuth from 'next-auth'
import { MongoDBAdapter } from '@next-auth/mongodb-adapter'
import clientPromise from 'lib/mongodb'
import GoogleProvider from 'next-auth/providers/google'

const maxAge = 30 * 24 * 60 * 60 // 30 days

export default async function auth(req, res) {
  return await NextAuth(req, res, {
    adapter: MongoDBAdapter({ db: (await clientPromise).db('NexusDatabase') }),
    //Configure one or more authentication providers
    //We will solely use Google, preferably within a single domain
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        profile(profile: { id; name; email; picture }) {
          return {
            role: 'user',
            id: profile.id,
            name: profile.name,
            email: profile.email,
            image: profile.picture,
          }
        },
      }),
    ],
    pages: {
      // signIn: '/auth/signin', // Don't need this page as we redirect them directly to Google Auth
      signOut: '/pages/index', // Redirect them to home page on sign out
      error: '/auth/error',
      newUser: '/auth/new-user',
    },
  })
}

This is the error I am getting:

https://next-auth.js.org/errors#oauth_parse_profile_error Cannot read properties of undefined (reading 'toString') {
  error: {
    message: "Cannot read properties of undefined (reading 'toString')",
    stack: "TypeError: Cannot read properties of undefined (reading 'toString')\n" +
      '    at getProfile (webpack-internal:///./node_modules/next-auth/server/lib/oauth/callback.js:149:39)\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async oAuthCallback (webpack-internal:///./node_modules/next-auth/server/lib/oauth/callback.js:115:12)\n' +
      '    at async Object.callback (webpack-internal:///./node_modules/next-auth/server/routes/callback.js:50:11)\n' +
      '    at async NextAuthHandler (webpack-internal:///./node_modules/next-auth/server/index.js:171:18)\n' +
      '    at async auth (webpack-internal:///./pages/api/auth/[...nextauth].ts:18:10)\n' +
      '    at async Object.apiResolver (/Users/rajbir/Projects/nexus/node_modules/next/dist/server/api-utils.js:101:9)\n' +
      '    at async DevServer.handleApiRequest (/Users/rajbir/Projects/nexus/node_modules/next/dist/server/next-server.js:770:9)\n' +
      '    at async Object.fn (/Users/rajbir/Projects/nexus/node_modules/next/dist/server/next-server.js:661:37)',
    name: 'TypeError'
  },
},
  OAuthProfile: {
    iss: 'https://accounts.google.com',
    ...
    ...
    user: null
},
message: "Cannot read properties of undefined (reading 'toString')"

It seems that it cannot read my profile correctly because it's reading undefined but asides from the user under OAuthProfile, none of the other fields are null/undefined. Am I missing something?

[balazsorban44]

yes, Google doesn't return an id, use sub instead.

next-auth/src/providers/google.ts

Line 4 in ba39efb

sub: string

[rajbirjohar]

I'm getting this error @balazsorban44:

Property 'role' does not exist on type '{ name?: string; email?: string; image?: string; }'

when using your suggestion.

[rajbirjohar]

Oh it works but VS Code is throwing that. It must be a type error then. How can I resolve it?

[balazsorban44]

https://next-auth.js.org/getting-started/typescript

[balazsorban44]

Please do a search in the docs before asking/tagging me. If it's still unclear upon reading, I'm happy to answer then.

[rajbirjohar]

Apologies for not reading the docs thoroughly enough. But this was exactly what I needed :) Thank you!

[vorcigernix]

It still does not work for me, not sure I understand the concept of extending the fields. My code in [...nextauth].js is:

    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      profile(profile) {
        return {
          id: profile.sub,
          email: profile.email,
          picture: profile.picture,
          address: profile.address,
          recovery: profile.recovery,
          key: profile.key,
        };
      },
    }),

  callbacks: {
    // async signIn({ user, account, profile, email, credentials }) { return true },
    // async redirect({ url, baseUrl }) { return baseUrl },
    async session({ session, user }) {
      session.address = user.address || "";
      session.recovery = user.recovery || "";
      session.key = user.key || "";
      return session;
    },

I also added the fields in types:

declare module "next-auth" {
  /**   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context   */
  interface Session {
    user: {
      address: string;
      recovery: string;
      key: string;
    };
  }
}

Now, the whole thing works, but in database and in session there is no trace of the fields I am trying to add.
@rajbirjohar you clearly succeed in fixing this, can you help?

[rajbirjohar]

Yes so you're nearly there. I'm using v4 and Typescript. I mention this because you said you have a [...nextauth].js which is in JS.

I essentially built a two step application process where the user first signs in, then I have them fill out their extra fields.

First off in your [...nextauth] file, instead of filling out the extra fields with profile.attribute, I set them to empty strings or "none". I'm not sure if you can set them to the values you have because they don't exist in the first place.

Next, your callbacks should be be in the format session.user.address = user.address and so on for the rest of your fields. I assume user.address || "" works too.

Finally, your augmented Session object should be within a types directory and VS Code needs you to reload the entire environment every time you change your types so it can be recognized by the IDE. Then I also augmented the User object with the same extended properties. I figured it was necessary since I want the user to have a new shape as well. So my types look like this:

// next-auth.d.ts
import NextAuth from 'next-auth'

declare module 'next-auth' {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      name: string
      email: string
      image: string
      /** The user's role. */
      role: string
      orgRole: string
    }
  }
  interface User {
    role: string
    orgRole: string
  }
}

From my understanding, the extra fields will only be populated when the user is first created. So I just to be sure, I wiped out my accounts, sessions, and users collection in MongoDB.

Let me know if this helps or if something is unclear.

[vorcigernix]

Thank you so much, helped a lot. Any idea how do I get JWT session working in our usecase? Edit: Problem is probably related to the key management, I'll post a guide for a future reference.

[rajbirjohar]

Unfortunately no since I haven't personally used it. But from reading the docs, you would be replacing the user parameter for token instead in your session callback. I'm not sure if direct replacement will work. You'll have to test that out yourself.

[vorcigernix]

Thank you anyway :) BTW, just to be sure I understand it correctly, these extra parameters have to be set directly in database right? There is nothing like a update method in nextauth, correct?

[rajbirjohar]

If I understand the docs correctly, yes. You have to set these extra params when the user is created for the first time. You obviously shouldn't be manipulating your db directly but have next-auth generate a User object with all your fields.

Then, you can have some form asking the user to fill those fields out and then update the fields in your db in your user collection.

[vorcigernix]

Awesome, thanks for all the help

…

On Sun, 14 Nov 2021 at 19:26, Rajbir Johar ***@***.***> wrote: If I understand the docs correctly, yes. You have to set these extra params when the user is created for the first time. You obviously shouldn't be manipulating your db directly but have next-auth generate a User object with all your fields. Then, you can have some form asking the user to fill those fields out and then update the fields in your db in your user collection. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3158 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABLZOGQC76HM353VNWI57DUL75NPANCNFSM5HUKLKHA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.