Ueberauth social media login on server usage on client

Hey there,

I added social media logins (fb, g) and here is the flow
user click on login with fb button on client and calls /auth/facebook
gets redirected to facebook logs in
response from facebook comes to the backend to /auth/facebook/callback
i create a user and log him in
and send the user back in the json response as with the normal login
but the problem is that with the response the client is not on the original page, but on a link to the backend
how can this be done in a way that the user stays on the client page?


Please calrify this:

So you are using phoenix in api mode?

What client are you using react vue angular ember?

Or are you using phoenix with views ?

The client is vue but would also be an ios and android
I am using phoenix with json views

I think you will have to redirect the user your desired page after the login.

Also are you using absinthe?

no i don’t
but the problem is the redirect, I am sending a json response, with the logged in user
but it shows up in the browser as a page of json from a link that points to the server from facebook or google and looks like this:


Can you share some code on where you think is the problem, maybe where you create a the login and also the mix.exs file to see what packages you are using?

maybe i was not clear, the problem is to how to get back to the client page at the end instead of landing on the page of the server.
I don’t know how to tackle the issue

  def callback(%{assigns: %{ueberauth_auth: auth}} = conn, _params) do
    user = basic_info(auth)

      resource = %User{} <-
      {:ok, token, _} <-
          key: :user,
          permissions: %{user: GPermissions.max()}
    ) do
      resource = Accounts.add_categories_from_settings(resource)

      unread_uninteracted_invitations_counts =

      |> put_status(200)
      |> put_view(AuthView)
      |> render(
        message: "Logged in!",
        token: token,
        user: resource,
        notis: unread_uninteracted_invitations_counts
      _ ->
        |> put_status(401)
        |> put_view(ErrorView)
        |> render("401.json", message: "Failed to authenticate.", errors: nil)

it is working as expected all, just that is it possible and if yes how to end up back on the client page


`      {:postgrex, "~> 0.14"},
      {:ecto, "~> 3.0.9"},
      {:comeonin, "~> 5.1"},
      {:argon2_elixir, "~> 2.0"},
      {:ueberauth, "~> 0.5"},
      {:ueberauth_identity, "~> 0.2"},
      {:guardian, "~> 1.2"},
      {:guardian_db, "~> 2.0"},
      {:arc, "~> 0.11"},
      {:arc_ecto, "~> 0.11"},
      {:trans, "~> 2.0"},
      {:hashids, "~> 2.0"},
      {:csv, "~> 2.0"},
      {:ex_aws, "~> 2.0", override: true},
      {:ex_aws_s3, "~> 2.0"},
      {:ex_aws_sns, "~> 2.0"},
      {:ex_aws_ses, "~> 2.0"},
      {:poison, ">= 1.2.0"},
      {:jason, "~> 1.1"},
      {:hackney, "~> 1.9"},
      {:sweet_xml, "~> 0.6"},
      {:word_smith, "~> 0.1.0"},
      {:timex, "~> 3.4"},
      {:ex_phone_number, "~> 0.1"},
      {:quantum, "~> 2.3"},
      {:gettext, "~> 0.14"},
      {:elixir_uuid, "~> 1.2"},
      {:ecto_autoslug_field, "~> 1.0"},
      {:ueberauth_google, "~> 0.8"},
      {:ueberauth_facebook, "~> 0.8"},
      {:bypass, "~> 1.0", only: :test}`

Let;s try this

Instead of render replace with redirect(to: “/”)

      |> put_status(200)
      |> put_view(AuthView)
      |> redirect(to: "/")

This should redirect on succesfull auth to the / home page.

well that is something, but we are not really ahead with that because we are still in the realm of the server, this would take us to the homepage of the server, not the client, and no user anymore obviously

Can vue read the json from your backend in a component?

Do you see them connected?

Also i assume that your vue is on :8080 and your server on 4000 ports?

they are on separate hosts, not connected
for this: Can vue read the json from your backend in a component?
i am not sure, i am not working on the vue project, but I am sending the exact same response in the usual login flow and there are no problem there at all, the issue here seems to be that because the facebook login opens in the same window as the app it doesnt get back to the app/client

Vue is a client so it should have a direct communication with your server.

One other idea is to consume your json render pages with axios that will be place in Vue.

ah you meant connected like that, then yes it is connected
axios is being used already in the project, but the problem is that we are technically not in the client anymore, because we are on the facebook page

Are you a backend dev also have a frontend team mate?

If so, the vue axios should get data from the server then take over and display the page on the client, which in this case it doesn’t so something is fishy here.

Also to make our lives easier let’s do this

Did you created the project using the api mode for phoenix?

Like this mix phx.new app_name --no-webpack --no-html

yes I am the backend dev, the frontend guy gave up on this solution and wants to implement the oauth on the clients at this point
I did no create the project, it is an umbrella project, this sub-project doesnt have any html stuff in it, the whole project does

ok here is something you can try with google login,
this is the url that is being called by the client, and if you log in you can see the response, in your browser,
but he seems to struggle to take this response and get back to the client because the login page opens in the place of the client page

When i visit that page i get this error in the console
Unchecked runtime.lastError: The message port closed before a response was received.

maybe it is geo-locked, because it is for testing, we are in the netherlands

I am also in europe

You should take a look at this https://www.freecodecamp.org/news/authentication-using-elixir-phoenix-f9c162b2c398/

I don’t know if you tried, but when you set up your apps in google or facebook, the redirect from there where should that point to?