Angular 2 + Rails + Auth0

Question

I'm trying to figure out how to use Auth0 with an Angular/Rails application.

I've set up Auth0 with an Angular-only application and it worked fine. I can see the Auth0 docs for Rails and as far as I can tell it makes sense.

What I don't understand is how to connect the front-end authentication with Rails, since I'm not finding documentation on this anywhere.

Hi jason, I was also searching the same but no luck. So i took a way around. And solve it by creating a api in rails and used facebook, google authentication separately in frontend(as they have mentioned in their docs). — Pravesh Khatri, Nov 20 '16 at 15:37
Note: I wrote a [blog post about this topic](https://www.angularonrails.com/auth0-angular-2-rails-5-authentication/) since posting the question. — Jason Swett, Jan 07 '17 at 20:40

score 2 · Accepted Answer · answered Nov 23 '16 at 00:56

Okay, I've figured it out. If I use Auth0 to authenticate on the Angular side and then make an HTTP request to my Rails server, that HTTP request will have an Authorization header with a value like this:

Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2JlbmZyYW5rbGlubGFicy5hdXRoMC5jb20vIiwic3ViIjoiYXV0aDB8NTgzMDZmOTFjMDg4MTRlMDEwMTVmNDM0IiwiYXVkIjoiajNKdHpjYnNpTUkyR0JkRnZGb3FFTjM4cUtTVmI2Q0UiLCJleHAiOjE0Nzk4OTc3OTYsImlhdCI6MTQ3OTg2MTc5Nn0.2cGLY_e7jY0WL-ue4NeT39W4pdxJVSeOT5ZGd_xNmJk

The part after "Bearer", the part starting with "eyJ0", is a JSON Web Token. Henceforth I'll refer to the JSON Web Token simply as the "token".

When Rails receives the HTTP request, it can grab and then decode the token. In my case I'm using Knock.

Knock expects my User model to define a from_token_payload method. Here's what mine looks like:

class User < ApplicationRecord
  def self.from_token_payload(payload)
    User.find_by(auth0_id_string: payload['sub'])
  end
end

My user table has an auth0_id_string column. If I manually create a user whose auth0_id_string matches what I find under sub in the decoded Auth0 token, then my from_token_payload method will find that user and Knock will give me a thumbs up for that token. If no user is found, thumbs down.

So it goes like this, roughly:

Angular asks Auth0 to authenticate a user
Auth0 sends back a JSON Web Token
Angular sends that JSON Web Token to Rails
Rails decodes that token
Rails tries to find a user that matches the data in that token
Rails sends back either a 200 or 401 depending on whether a matching user was found

There are some pieces missing but that's the gist of it. I'll probably end up writing a tutorial on Angular + Rails + Auth0 authentication since, as far as I've been able to tell, none currently exists.

score 0 · Answer 2 · answered Nov 21 '16 at 12:26

Based on the information you provided I'm assuming that you want to have an application that has the front-end implemented in Angular and uses a Rails based API to provides the services required to the Angular front-end.

In this scenario you can model this as a single (client) application from the Auth0 side of things and do one of the following:

Use the ID token resulting from the authentication for two purposes:
- to provide information about the currently authenticated user to the Angular application so that it can meet any applicable user interface requirements
- as a way to authenticate calls made by the Angular application to the Rails API, that is, the Rails API uses a token-based authentication system that accepts the ID tokens issued by Auth0.
Expose an endpoint on the Rails API that can be used by Angular to exchange the ID token received upon user authentication by any other credentials that can then be later used to access the API.

The first option is the easiest to implement, but you'll have to include the ID token in every request. The second one increases complexity on your side, but it may allow you more flexibility.

If this does not address all your concerns, can you please update the question with more details about the exact scenario you're trying to accomplish.

A final note, if your intentions are to provide an API that can be later consumed by a different range of applications then the most correct way to secure it would be by using a token-based system where the tokens would be issued by an authorization server compliant with OAuth2.

Having your own OAuth2 authorization server is significantly complex to maintain so Auth0 is in the process of enabling this as an additional service that can already be used in preview mode for accounts in the US region. This would basically allow to obtain as part of the authentication process an ID token used by the client application to know the currently authenticated user and also an access token that would allow to make call into the specified API.

Angular 2 + Rails + Auth0

2 Answers2