Add access token from OAuth provider | Convex Community | Page 1

turbid zinc Mar 2, 2025, 3:42 AM

#

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

trail sluice Mar 2, 2025, 9:42 AM

#

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.

#

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.

#

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

trail sluice Mar 2, 2025, 10:51 AM

#

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
    }
  }

turbid zinc Mar 2, 2025, 5:39 PM

#

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

trail sluice Mar 2, 2025, 5:53 PM

#

turbid zinc Ah, fair point—so, best practices would be to store the token to the database an...

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

turbid zinc Mar 2, 2025, 10:32 PM

#

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())
  })
});

#

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: '[email protected]',
    name: 'coolname',
    refreshToken: '...'
  }
}

Thanks for talking through this with me @trail sluice !

#Add access token from OAuth provider