Nuxt.js exchanging authorization code for access token Oauth2

Viewed 453

I'm trying to exchange the authorization code I got in the first step of the documentation for access token. Where I'm stuck is how to send a request for the token that contains the code I've just got with the first request. This is my code:

auth: {
  redirect: {
    login: '/',
    callback: '/auth'
  },
  strategies: {
    wrike: {
      scheme: 'oauth2',
      endpoints: {
        authorization: 'https://login.wrike.com/oauth2/authorize/v4',
        token: 'https://login.wrike.com/oauth2/token',
        logout: '/'
      },
      token: {
        property: 'access_token',
        type: 'Bearer',
        maxAge: 1800
      },
      responseType: 'code',
      grantType: 'authorization_code',
      accessType: 'offline',
      clientId: XXXX,
      client_secret: YYYY
    }
  }
}

I can't figure it out how I should set up the redirect URI, in the client or in the server side? How should I do the second request? (This below)

POST https://login.wrike.com/oauth2/token
  //Parameters:
  client_id=<client_id>
  client_secret=<client_secret>
  grant_type=authorization_code
  code=<authorization_code>
1 Answers

I think Edward is right. It doesn't seem to work. You can either do the custom schema which is what I am going to do, or you can do what I currently have which is something like this (of course ignore all the console.log and stuff like that):

const urlParams = new URLSearchParams(window.location.search)
    const code = urlParams.get('code')
    const state = urlParams.get('state')
    console.log('state', state)
    console.log('stateStorage', window.localStorage.getItem(state))

    if ((code && state) && state === window.localStorage.getItem('state')) {
      this.$axios.post('http://publisher-local.co.uk:8080/oauth/token', {
        grant_type: 'authorization_code',
        client_id: 5,
        redirect_uri: 'http://localhost:3000/auth',
        code_verifier: window.localStorage.getItem('verifier'),
        code
      }).then(response => {
        this.$auth.setUserToken(response.data.access_token)
        this.$auth.fetchUser()
      })
    }

So basically after you are redirected back to your client after logging in on the server page just look for the details in the URL and make the request yourself.

Related