Auth-module: Documentation on using third party authentication with a first-party backend server

Created on 27 Mar 2020  路  10Comments  路  Source: nuxt-community/auth-module

I mean,

I've got a back-end API where I validate the access_token which is given by Facebook or Google while callback page is running. I need to post in my API the access token and it returns another token after validate it. This new token is from my back-end API and it's the way to control users who were authenticated and save the information in the database.

How can I integrate this auth module for my goal?

docs

Most helpful comment

If I understood correctly, you have a backend that will be the provider of access_tokens, but you want to use Facebook or Google as the authorization server (to prove the user's identity).

To handle this, you'll need OAuth2's authorization code flow

OAuth2 (authorization code) has two steps.

  • The first is the redirect, which takes the user to Facebook's or Google's page for authorization. Upon returning, the provider gives auth-module a code
  • The second is when auth-module makes another request to the provider with the code and gets an access_token back.

What you want to do, then, is have your server perform the second step of exchanging the code for an access_token from the provider. After that, its your choice of returning the access_token from the provider or using it to get info about the user and returning another JWT, etc generated by your server.

Here is what you need to do:

On the server

  • Implement a /auth/token endpoint on that:

    • takes the payload required to exchange a code for an access_token. Typically it contains a code, client_id, client_secret, redirect_uri, etc

    • Have your endpoint perform the actual exchange for the access_token

    • (optional) Use the access_token to get info about the user and save it on your DB

    • Return an access_token (the one from the provider or a new one created by the server)

    • (optional) Implement token refreshing by checking if the payload's response_type is refresh_token

  • Implement a /auth/user endpoint that:

    • Returns info about the user that owns the request's token

On auth-module

  • Register a Facebook(or other) auth strategy as you normally would
  • Set response_type: "code" so it uses the auth code flow
  • Change the endpoint for token and user to your server's

For auth-module < 5, the config should look like

auth: {
  strategies: {
    facebook: {
      response_type: 'code', // Use auth code flow
      client_id: '...',
      client_secret: '...', // Required for auth code flow
      userinfo_endpoint: 'http://your-server.com/auth/user',  // Your server's user endpoint
      access_token_endpoint: 'http://your-server.com/auth/token', // Your server's token endpoint
      scope: ['public_profile', 'email', 'user_birthday']
    },
  }
}

For 5+:

auth: {
  strategies: {
    facebook: {
      clientId: '...'
      clientSecret: '...',
      responseType: 'code',
      endpoints: {
        token: 'http://your-server.com/auth/token',
        userInfo: 'http://your-server.com/auth/user'
      },
      scope: ['public_profile', 'email', 'user_birthday']
    }
  }
}

All 10 comments

+1

If I understood correctly, you have a backend that will be the provider of access_tokens, but you want to use Facebook or Google as the authorization server (to prove the user's identity).

To handle this, you'll need OAuth2's authorization code flow

OAuth2 (authorization code) has two steps.

  • The first is the redirect, which takes the user to Facebook's or Google's page for authorization. Upon returning, the provider gives auth-module a code
  • The second is when auth-module makes another request to the provider with the code and gets an access_token back.

What you want to do, then, is have your server perform the second step of exchanging the code for an access_token from the provider. After that, its your choice of returning the access_token from the provider or using it to get info about the user and returning another JWT, etc generated by your server.

Here is what you need to do:

On the server

  • Implement a /auth/token endpoint on that:

    • takes the payload required to exchange a code for an access_token. Typically it contains a code, client_id, client_secret, redirect_uri, etc

    • Have your endpoint perform the actual exchange for the access_token

    • (optional) Use the access_token to get info about the user and save it on your DB

    • Return an access_token (the one from the provider or a new one created by the server)

    • (optional) Implement token refreshing by checking if the payload's response_type is refresh_token

  • Implement a /auth/user endpoint that:

    • Returns info about the user that owns the request's token

On auth-module

  • Register a Facebook(or other) auth strategy as you normally would
  • Set response_type: "code" so it uses the auth code flow
  • Change the endpoint for token and user to your server's

For auth-module < 5, the config should look like

auth: {
  strategies: {
    facebook: {
      response_type: 'code', // Use auth code flow
      client_id: '...',
      client_secret: '...', // Required for auth code flow
      userinfo_endpoint: 'http://your-server.com/auth/user',  // Your server's user endpoint
      access_token_endpoint: 'http://your-server.com/auth/token', // Your server's token endpoint
      scope: ['public_profile', 'email', 'user_birthday']
    },
  }
}

For 5+:

auth: {
  strategies: {
    facebook: {
      clientId: '...'
      clientSecret: '...',
      responseType: 'code',
      endpoints: {
        token: 'http://your-server.com/auth/token',
        userInfo: 'http://your-server.com/auth/user'
      },
      scope: ['public_profile', 'email', 'user_birthday']
    }
  }
}

Great piece Maronato, just what I was looking for! But how does the signup with social work?

To the Oauth client (your app), social login and signup flows are indistinguishable. If you want to differentiate between them you have to keep track of registered users using a database :(

Yes that's what I'm doing. I have a Django/Nuxt app with working signup/login flow using JWT and I want to add social auth for better UX.

@toniengelhardt I'm trying to do the same thing (with Django REST & Nuxt) - have you been able to get OAuth working with Facebook yet?

If so, I'd really appreciate any guidance/code snippets of getting it working.

@Maronato do you have any code snippets for the process you described?

I haven鈥檛 tried this particular setup, but dj-rest-auth鈥檚 social auth endpoint may receive the code parameter, which is exactly what you need.

On Nuxt, just follow my previous snippet. On Django, follow dj-rest-auth's tutorial, enabling JWT and it should all work.

If you are still unable to get it working after that, I'll try to setup a demo repository.

@Maronato Would you be able to set up a demo repo? Doesn't even have to be Facebook, I have tried to get a custom auth solution with tokens and have been unable to find any success on the Django side.

I understand how the Nuxt side of things work.

Sure! Here it is

Thanks all for calling this out, and for posting some write-ups. This is a really important part missing from our docs, and I think we should probably even incorporate some specific functionality to support this use case.

Was this page helpful?
0 / 5 - 0 ratings