Confused about OAUTH2 workflow

Learn
1

I am working on an SPA written in Elm with an Elixir/Phoenix back end.

I am trying to implement Ueberauth/google for authentication and it is working when I hit the auth/request route with a normal request (I go to google, agree to share my data, get redirected back to my app with the google data, from there I can create a new user, if not existing, generate a JWT token with Guardian, put the token and user data into a response body and send the response).

I am confused about how to do this from Elm though. If I try to make an Elm.http request to initiate the workflow, I get a CORS error from chrome on the redirect.

I could start the login routine with a normal <a href=.... > tag, but I don’t think it is possible to read the response headers on the final redirect (the one back to my app, where I can add the JWT).

The only thing that I can think of is to put the model into local storage, then add the jwt to the url and parse it with Elm during init, and then recover the model from local storage. This just seems heinous though. I have done a ton of googling, but only find tutorials for Ueberauth and non-spa’s (ie, the token is put in the session) or SPAs where the user enters email and password into a form, which Elm then sends to the back-end and gets the token in the response.

Any ideas on how to use Uauth2 from Elm?

3 Likes
2

I’m in the same boat. Subscribing.

3

I’m about to implement OAuth flow as well. I have two options on my mind:

  1. with Flags or
  2. with Ports and window.open.

Currently, I’m leaning more towards the second option as it seems to be more UX friendly.

In a bit more details, the first option would require initiating a regular GET request to OAuth provider and when all credentials are obtained, you render your SPA with passing session data via flags. The second option will just pop up a new window and runs the very same flow as the first option, but instead, at the end, it would pass down session data via ports.

1 Like
4

I put the JWT in the flags and set it from elixir using a template variable.

2 Likes
5

I think this is the most practical. Thanks for sharing.