hawkyre

hawkyre

I’ve already asked the question in the package’s hex module repo but I’m not sure I can expect an answer soon and I really need this to be done ASAP so I’m resorting to you guys.

I’m generating a google oauth user code in my Next.js frontend using this react oauth package , which is then sent to my server at /auth/google/callback and processed to obtain the user’s data.

This is the client’s code:

const googleLogin = useGoogleLogin({
  flow: 'auth-code',
  redirect_uri: `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/google/callback`,
  ux_mode: 'popup',
  scope: 'email profile openid',
  onSuccess: async (codeResponse) => {
    console.log(codeResponse);

    const tokens = await getAxiosInstance().post(
      `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/google/callback`,
      {
        code: codeResponse.code,
      }
    );

    console.log(tokens);
  },
  onError: (errorResponse) => console.log(errorResponse),
});

This is the server’s code #1 (I’ve copy pasted the relevant code from the elixir-auth-google package into my app to see if it changed anything but it doesn’t):

post "/callback" do
  conn = Plug.Conn.fetch_session(conn)

  {conn, status, body} =
    case conn.assigns[:user_id] do
      _ ->
        code = Map.get(conn.body_params, "code", "") |> IO.inspect()

        {:ok, token} =
          get_token(code, nil)
          |> IO.inspect()

        {:ok, profile} = ElixirAuthGoogle.get_user_profile(token.access_token) |> IO.inspect()

        IO.inspect([code, token, profile])

        Responses.r200(conn, %{})
    end

  send_resp(conn, status, body)
end

@google_token_url "https://oauth2.googleapis.com/token"

def get_token(code, redirect_uri) do
  # Build the request body
  body =
    %{
      client_id: "...",
      client_secret: "...",
      redirect_uri: "http://localhost:4000/auth/google/callback",
      grant_type: "authorization_code",
      code: code,
      scope: "email profile openid"
    }
    |> Jason.encode!()

  headers = [
    {"Content-Type", "application/json"}
  ]

  # Make the HTTP POST request
  case HTTPoison.post(@google_token_url, body, headers) do
    {:ok, %HTTPoison.Response{status_code: 200, body: response_body}} ->
      # Handle the response, typically converting JSON to an internal format
      case Jason.decode(response_body) do
        {:ok, decoded} -> {:ok, decoded}
        {:error, reason} -> {:error, reason}
      end

    {:ok, %HTTPoison.Response{status_code: status} = res} ->
      IO.inspect(res)
      {:error, "Failed to retrieve token, status code: #{status}"}

    {:error, reason} ->
      {:error, reason}
  end
end

And this is the server code #2, using the library:

post "/callback" do
  conn = Plug.Conn.fetch_session(conn)

  {conn, status, body} =
    case conn.assigns[:user_id] do
      _ ->
        code = Map.get(conn.body_params, "code", "") |> IO.inspect()

        {:ok, token} =
          ElixirAuthGoogle.get_token(code, conn)
          |> IO.inspect()

        {:ok, profile} = ElixirAuthGoogle.get_user_profile(token.access_token) |> IO.inspect()

        IO.inspect([code, token, profile])

        Responses.r200(conn, %{})
    end

  send_resp(conn, status, body)
end

Something very interesting happens. When I use the library as-is in my Elixir, the error is that the OAuth client is not found, even though the envvars are very much present BUT the only difference is that the variable has an extra \r at the end of itself. But If I recompile the library with hardcoded values or use the custom function that is based on the library where I also hardcode the values, the error instead is a redirect_uri_mismatch. However, I have checked 1000 times that the URL is the same, waited days between checking and created new OAuth clients, but the error persists.

Now, when I follow the elixir-auth-google guide and create the client with a phoenix app, the thing just works without modifying the library at all. No invalid client, no redirect_uri_mismatch, and I’ve checked again 1000 times that the values are exactly the same in both. If you look at the issue I opened on their repo, the requests sent to google are exactly the same, yet the bare Elixir one fails and the Phoenix one doesn’t.

Could this be due to how I’m generating the user code in the frontend? Is there any difference in how JSON is parsed and sent over in Phoenix versus no Phoenix when using HTTPoison? Any help or advice is appreciated.

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
roeland
Kia ora, We have been using elixir-google-api to connect to Google Drive. However, with the updates to Tesla due to CVEs this is now bro...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New
rahultumpala
Hello, I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews