Ueberauth social media login on server usage on client

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?

I don’t use social for auth I come from a node background.

When we discuss about api’s then that means that my auth page should be json no html or other fancy stuff, then vue will display the correct page after recieving the api response from auth.

Server only json - no html rendering

Client will take care of displaying the form and take actions based on the server response

Then you need to adapt guardian and uberauth to this design server json only and client html.

Look at the link i provided should offer some help.

this seems relevant: Oauth2 in Single page applications

It might work also i will delete some posts that are not relevant from the thread, i suggest you do the same maybe keep just the mix.exs and the callback function.

Also here is the link i suggested https://www.freecodecamp.org/news/authentication-using-elixir-phoenix-f9c162b2c398/

alright, thanks for the effort, it seems liek at the end it will have to be something lie this:

A bit late to join the discussion.

I accomplish what you need by sending the target URL in the state OAuth variable.
It’s not designated for this purpose, I know, but works fine.
If auth is successful, I redirect from Phoenix API app to the url from the state var, and send user login and generated auth token as GET parameters.

1 Like