I actually think I might have come up with a solution from a bit more reading.

Is this ok/no security holes

1. User clicks ‘sign in via google’ or something in my react app.
2. Then in my react app I redirect my user to my api /api/auth/google ueberauth route.
3. I the user does the auth dance with google and the result is sent back to my api
4. My api does a DB lookup to see if the user is already created. If they are it signs a JWT (using guarding) and returns that in the response headers.
   4b. If they are not, it creates the user in the backend, then generates a JWT and again puts it back in the header along with some other information indicating that they are a new user and may need to do some more sign up stuff.
5. I then redirect back to my react app with the JWT in the redirect headers.
6. Authentication happens as normal from then on using the JWT.
7. ON sign out, I delete the jwt from their local storage and when they sign in again the process repeats it’s self.

How does this look?

@acrolink yeah pretty much I think (Not 100% what else ueberauth is doing under the hood) -> you see any issues with that?

@acrolink also looks like the google strategy then makes another request on callback to obtain an access token:

  @doc """
  Handles the callback from Google.
  """
  def handle_callback!(%Plug.Conn{params: %{"code" => code}} = conn) do
    params = [code: code]
    opts = [redirect_uri: callback_url(conn)]
    case Ueberauth.Strategy.Google.OAuth.get_access_token(params, opts) do
      {:ok, token} ->
        fetch_user(conn, token)
      {:error, {error_code, error_description}} ->
        set_errors!(conn, [error(error_code, error_description)])
    end
  end

So you check for an existing account in the DB and sign a token (to be returned to the JS front-end application for future requests) only by relying on the email address returned by the oauth2 provider?

Just for the sake of not having somebody replying to my last answer, and as I think it may be interesting:

I took a look at how this is done at CaptainFacts’ and decided to do the same. Here’s my list of steps, based on what’s been written by @Harrisonl

1. User clicks ‘sign in via [thirdparty]’ or something in my React app.
2. Still on the client’s side, create and use the third party’s oauth url to redirect or open in a new tab. Here’s CaptainFacts’ repo example.
3. The user does the auth dance with [thirdparty] and the result is sent back to React.
4. Now is when React does the signin with Phoenix via an API POST. E.g. in this line.
   4.a Existing user is retrieved and maybe updated and JWT token gets sent.
   4.b Or new user is created and JWT gets sent with maybe extra information.
5. React gets the JWT as a regular login response.
6. Authentication happens as normal from then on using the JWT.
7. Sign out is performed by unlinking the third party from the user, and removing the local JWT.