fartinmartin•2mo ago

Add access token from OAuth provider

I've successfully used the Spotify provider from @auth/core/providers/spotify with covexAuth to create users/sessions in my Convex app. Now, I'd like to call the Spotify API with the proper access token. I tried using the token generated by Convex Auth's signIn, but this doesn't appear to work—I suppose that makes sense, but it was worth a shot. Since the Convex Auth docs mention that configs are implemented with Auth.js configs, I took a look at the Auth.js "Extending the session" docs. They expose session and jwt callbacks for the purpose of sending data from a provider to the client. It looks like these callbacks are intentionally left out of the convexAuth implementation, but is there a way to achieve something similar? https://authjs.dev/guides/extending-the-session I did notice that Convex Auth's defaultAccount includes account.access_token but am unsure how to access this in my app. Any tips? https://github.com/get-convex/convex-auth/blob/2f77702b0e42fa705dfe2af623494682e6a21b49/src/server/provider_utils.ts#L118

7 Replies

Spioune•2mo ago

Convex auth aside, what you would normally do is after the user log in with Spotify, he would be redirected to your Spotify callback. In there you have access to the access token, you can save it to the database (maybe can save the refresh token too) I don't think you should send it to the client.

Spioune•2mo ago

https://next-auth.js.org/configuration/callbacks

Callbacks | NextAuth.js

Callbacks are asynchronous functions you can use to control what happens when an action is performed.

Spioune•2mo ago

See here in the JWT callback you have access to account.access_token

providers: [
    Providers.Spotify({
      clientId: process.env.SPOTIFY_ID,
      clientSecret: process.env.SPOTIFY_SECRET,
    })
  ],
  callbacks: { 
    async jwt(token, _, account) {
      if (account) {
        token.id = account.id
        token.accessToken = account.accessToken
      }
       return token
    },
    async session(session, user) {
      session.user = user
      return session
    }
  }

providers: [
    Providers.Spotify({
      clientId: process.env.SPOTIFY_ID,
      clientSecret: process.env.SPOTIFY_SECRET,
    })
  ],
  callbacks: { 
    async jwt(token, _, account) {
      if (account) {
        token.id = account.id
        token.accessToken = account.accessToken
      }
       return token
    },
    async session(session, user) {
      session.user = user
      return session
    }
  }

fartinmartinOP•2mo ago

Ah, fair point—so, best practices would be to store the token to the database and call Spotify API through actions, rather than sending token to the client and letting the client run fetch requests directly to the Spotify API? Would I want to create a new table rather than extending to session or user documents? But before I store the token I still need to figure out where I can access it within Convex Auth—I did see the callbacks you mentioned in the Auth.js docs, but they seem to be intentionally removed from the Convex Auth implementation. It looks like all of the Convex Auth callbacks occur before the provider sends back any access token? https://labs.convex.dev/auth/api_reference/server#callbacks

Spioune•2mo ago

Yes and I think if you try to fetch Spotify API from the browser you would get CORS error anyway. You should do it from the server. If you console.log every arguments of callback createOrUpdateUser() do you see anything useful? I am not familiar with convex auth, I thought they use the same config as auth.js

fartinmartinOP•2mo ago

Oh! Found a spot to grab the access and refresh tokens! Inside the Provider's profile callback: https://github.com/get-convex/convex-auth/blob/2f77702b0e42fa705dfe2af623494682e6a21b49/src/server/implementation/index.ts#L332 If I add accessToken and refreshToken to returned obj + user schema I can store them on the user table—not sure if that's poor form?

// convex/auth.ts
export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    Spotify({
      profile(profile, tokens) {
        return {
          id: profile.id,
          email: profile.email,
          name: profile.display_name,
          image: profile.images[0]?.url,
          accessToken: tokens.access_token,
          refreshToken: tokens.refresh_token
        };
      }
    })
  ]
});

// convex/schema.ts
export default defineSchema({
  ...authTables,
  users: defineTable({
    name: v.optional(v.string()),
    image: v.optional(v.string()),
    email: v.optional(v.string()),
    emailVerificationTime: v.optional(v.number()),
    phone: v.optional(v.string()),
    phoneVerificationTime: v.optional(v.number()),
    isAnonymous: v.optional(v.boolean()),
    accessToken: v.optional(v.string()),
    refreshToken: v.optional(v.string())
  })
});

// convex/auth.ts
export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    Spotify({
      profile(profile, tokens) {
        return {
          id: profile.id,
          email: profile.email,
          name: profile.display_name,
          image: profile.images[0]?.url,
          accessToken: tokens.access_token,
          refreshToken: tokens.refresh_token
        };
      }
    })
  ]
});

// convex/schema.ts
export default defineSchema({
  ...authTables,
  users: defineTable({
    name: v.optional(v.string()),
    image: v.optional(v.string()),
    email: v.optional(v.string()),
    emailVerificationTime: v.optional(v.number()),
    phone: v.optional(v.string()),
    phoneVerificationTime: v.optional(v.number()),
    isAnonymous: v.optional(v.boolean()),
    accessToken: v.optional(v.string()),
    refreshToken: v.optional(v.string())
  })
});

If you console.log every arguments of callback createOrUpdateUser() do you see anything useful?

Ah! Now that I've updated the Provider's profile callback it looks like afterUserCreatedOrUpdated contains the access / refresh tokens, so perhaps here is where I could write to a authAccessTokens table rather than storing on the user's document? Edit: hmm, what ever you return from profile() will be what Convex Auth uses to create a new user. This means if I plan on retrieving the tokens from there I must store them on the user table...

'afterUserCreatedOrUpdated:args' {
  userId: 'k579cc56mfpds313371xmn2rrd7bb5c9',
  existingUserId: 'k579cc56mfpds313371xmn2rrd7bb5c9',
  type: 'oauth',
  provider: {
    id: 'spotify',
    name: 'Spotify',
    type: 'oauth',
    authorization: 'https://accounts.spotify.com/authorize?scope=user-read-email',
    token: 'https://accounts.spotify.com/api/token',
    userinfo: 'https://api.spotify.com/v1/me',
    profile: [Function: profile],
    style: {
      brandColor: '#1db954'
    },
    options: {
      profile: [Function: profile]
    },
    checks: [ 'pkce' ],
    account: [Function: defaultAccount],
    clientId: '...',
    clientSecret: '...',
    issuer: undefined
  },
  profile: {
    accessToken: '...',
    email: 'test@example.com',
    name: 'coolname',
    refreshToken: '...'
  }
}

'afterUserCreatedOrUpdated:args' {
  userId: 'k579cc56mfpds313371xmn2rrd7bb5c9',
  existingUserId: 'k579cc56mfpds313371xmn2rrd7bb5c9',
  type: 'oauth',
  provider: {
    id: 'spotify',
    name: 'Spotify',
    type: 'oauth',
    authorization: 'https://accounts.spotify.com/authorize?scope=user-read-email',
    token: 'https://accounts.spotify.com/api/token',
    userinfo: 'https://api.spotify.com/v1/me',
    profile: [Function: profile],
    style: {
      brandColor: '#1db954'
    },
    options: {
      profile: [Function: profile]
    },
    checks: [ 'pkce' ],
    account: [Function: defaultAccount],
    clientId: '...',
    clientSecret: '...',
    issuer: undefined
  },
  profile: {
    accessToken: '...',
    email: 'test@example.com',
    name: 'coolname',
    refreshToken: '...'
  }
}

Thanks for talking through this with me @Spioune !

Spioune•2mo ago

I guess storing them in the user table is fine.

Add access token from OAuth provider

Did you find this page helpful?