Hono•2w ago

Hono Supabase OAuth Error

Hi! I am trying to implement OAuth with Supabase in my Hono application. This is a server-side API client and I want to get access to the session of the user. Right now I am doing something like this:

import { Hono } from "hono";
import { getSupabase } from "../middlewares/supabase";
import { envs } from "../config/envs";

const auth = new Hono();

auth.get("/oauth/google", async (context) => {
  const supabase = getSupabase(context);

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${envs.authServiceUrl}/auth/oauth/google/callback`,
    },
  });

  context.status(301);
  context.json({ data, error });
});

auth.get("/oauth/google/callback", async (c) => {
  const supabase = getSupabase(c);
  const { data, error } = await supabase.auth.getSession();
  const { session } = data;

  if (error) {
    return c.json({ error: error.message }, 400);
  }

  return c.json({
    message: "User session retrieved successfully",
    session,
  });
});

export default auth;

import { Hono } from "hono";
import { getSupabase } from "../middlewares/supabase";
import { envs } from "../config/envs";

const auth = new Hono();

auth.get("/oauth/google", async (context) => {
  const supabase = getSupabase(context);

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${envs.authServiceUrl}/auth/oauth/google/callback`,
    },
  });

  context.status(301);
  context.json({ data, error });
});

auth.get("/oauth/google/callback", async (c) => {
  const supabase = getSupabase(c);
  const { data, error } = await supabase.auth.getSession();
  const { session } = data;

  if (error) {
    return c.json({ error: error.message }, 400);
  }

  return c.json({
    message: "User session retrieved successfully",
    session,
  });
});

export default auth;

And the middleware is this: https://gist.github.com/nemo0/4ffcbc72b8b9005cf0f067b06a7acb86 But, I am getting errors like the image attached. Can someone guide me on what I am doing wrong, please?

28 Replies

Arjix•2w ago

That's a weird way of typing the context I'd suggest using the helper createMiddleware and passing the Variables type to it instead Modifying the global type is a no no Also, how did you get that error in your console? It reminds me of angular's dev server Is that bun or smth?

nemoOP•2w ago

It's bun. When hitting the endpoints, I'm getting the error. Also, this typing is suggested by the official Supabase team.

Arjix•2w ago

Well, that typing could cause issues if your middleware is not globally accessible Since it suggests that supabase is globally accessible If you are aware of that and know that it will be used through the entire backend, then it's ok But if the middleware is only used for some specific routes, then you are literally lying to typescript And lying to typescript is a no no Many of my coworkers lie to typescript, they don't have a good time --- This may sound dumb, but did you use the middleware at any point in the backend? Or did you just create it and leave it be It's clearly not part of the auth router So it must be higher up the chain If it is not, then how will it work?

nemoOP•2w ago

Right now it's part of nothing. I am trying to make OAuth work in the server-side with Supabase. Was following there guide here: https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=hono&queryGroups=environment&environment=server-client It's just a dummy route. Without SSR, I am able to get till the callback URL part. But at that point, supabase sends the access token in a format like this:

http://localhost:3000/auth/oauth/google/callback#access_token=eyJhbGci...&expires_at=1742897402&expires_in=3600&provider_token=ya29.a0AeXRPp6z

, now I can't get the access token to exchange it for a session. That's my primary problem.

Arjix•2w ago

Oof Uhh Uhhhhh Your browser must not be sending anything after the pound symbol

nemoOP•2w ago

I am not able to get anything after the #

Arjix•2w ago

Yes, that's what the # was meant to do It is meant for client-side JavaScript Or HTML headers The HTTP spec says it must never reach the server As it would be invalid

nemoOP•2w ago

Then the SSR package from Supabase should help? But the terrible documentation is making me realize again and again how dumb I am.

Arjix•2w ago

Can you provide the code you have so far in a repository so I can try out some stuff? Or is it too coupled with private code for you to do that?

nemoOP•2w ago

That is mostly private code, and that one is using ElysiaJS. But to give you some idea:

.get("/oauth/google", async (context) => {
        const { data, error: err } = await supabase.auth.signInWithOAuth({
          provider: "google",
          options: {
            redirectTo: `${envs.authServiceUrl}/auth/oauth/google/callback`,
          },
        });

        console.log("data.url", data.url);

        if (err) {
          logger.error(err, "Error initiating Google OAuth");
          return error(
            500,
            res(
              false,
              "Failed to initiate Google authentication",
              null,
              err.message
            )
          );
        }

        // Redirect user to Google's authentication page
        return new Response(null, {
          status: 302,
          headers: {
            Location: data.url,
          },
        });
      })
      .get("/oauth/google/callback", async (context) => {
 
}

.get("/oauth/google", async (context) => {
        const { data, error: err } = await supabase.auth.signInWithOAuth({
          provider: "google",
          options: {
            redirectTo: `${envs.authServiceUrl}/auth/oauth/google/callback`,
          },
        });

        console.log("data.url", data.url);

        if (err) {
          logger.error(err, "Error initiating Google OAuth");
          return error(
            500,
            res(
              false,
              "Failed to initiate Google authentication",
              null,
              err.message
            )
          );
        }

        // Redirect user to Google's authentication page
        return new Response(null, {
          status: 302,
          headers: {
            Location: data.url,
          },
        });
      })
      .get("/oauth/google/callback", async (context) => {
 
}

Arjix•2w ago

look, I cannot test the code (I don't want to make a supabase account), but I made a repo which should work https://github.com/ArjixWasTaken/tmp-supabase-hono-middleware

GitHub

GitHub - ArjixWasTaken/tmp-supabase-hono-middleware

Contribute to ArjixWasTaken/tmp-supabase-hono-middleware development by creating an account on GitHub.

Arjix•2w ago

I'll delete it later

ambergristle•2w ago

@nemo you're getting the error because supabase isn't set in context when you call getSupabase. as @Arjix pointed out, that's probably because you aren't calling the supabase middleware in the route chain

nemoOP•2w ago

Now I got this 😅 :

error: Context is not finalized. Did you forget to return a Response object or `await next()`?

error: Context is not finalized. Did you forget to return a Response object or `await next()`?

Found the solution. Thank you guiding me. I used the middleware like this:

app.use("*", supabaseMiddleware());

app.use("*", supabaseMiddleware());

Then tweaking the code like this worked:

import { Hono } from "hono";
import { getSupabase } from "../middlewares/supabase";
import { envs } from "../config/envs";

const auth = new Hono();

auth.get("/oauth/google", async (c) => {
  const supabase = getSupabase(c);

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${envs.authServiceUrl}/auth/oauth/google/callback`,
    },
  });

  if (error) {
    return c.json({ error: error.message }, 400);
  }

  c.status(301);
  c.redirect(data.url);

  return c.json({ data });
});

auth.get("/oauth/google/callback", async (c) => {
  const code = c.req.query("code");

  if (!code) {
    return c.json({ error: "Authorization code is missing" }, 400);
  }

  const supabase = getSupabase(c);

  const { data, error } = await supabase.auth.exchangeCodeForSession(code);
  const { session } = data;

  if (error) {
    return c.json({ error: error.message }, 400);
  }

  return c.json({
    message: "User session retrieved successfully",
    session,
  });
});

export default auth;

import { Hono } from "hono";
import { getSupabase } from "../middlewares/supabase";
import { envs } from "../config/envs";

const auth = new Hono();

auth.get("/oauth/google", async (c) => {
  const supabase = getSupabase(c);

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${envs.authServiceUrl}/auth/oauth/google/callback`,
    },
  });

  if (error) {
    return c.json({ error: error.message }, 400);
  }

  c.status(301);
  c.redirect(data.url);

  return c.json({ data });
});

auth.get("/oauth/google/callback", async (c) => {
  const code = c.req.query("code");

  if (!code) {
    return c.json({ error: "Authorization code is missing" }, 400);
  }

  const supabase = getSupabase(c);

  const { data, error } = await supabase.auth.exchangeCodeForSession(code);
  const { session } = data;

  if (error) {
    return c.json({ error: error.message }, 400);
  }

  return c.json({
    message: "User session retrieved successfully",
    session,
  });
});

export default auth;

ambergristle•2w ago

dope! glad yo hear you got it working

nemoOP•2w ago

So last night it worked fine. And in the morning, some energy decided to kill my energy and started giving me a new error which is from Supabase actually:

invalid request: both auth code and code verifier should be non-empty

invalid request: both auth code and code verifier should be non-empty

Someone provided a solution on Github, however, I am not quite sure on how to implement it on hono: https://github.com/orgs/supabase/discussions/21183#discussioncomment-11877084 Sorry for pinging you @ambergristle , but do you have any idea why the link I shared above works?

ambergristle•2w ago

i've pieced together a general sense of what's going on to begin with, if you're redirecting, you shouldn't also be sending json

// c.status(301);
return c.redirect(data.url, 301);
// return c.json({ data });

// c.status(301);
return c.redirect(data.url, 301);
// return c.json({ data });

the link you shared involves an issue with passing the verification code through the redirect, typically involving headers/cookies assuming you're using cookies to pass the verification code, signInWithOAuth should be setting them, but it looks like it might not be, or they're not included in the redirect the first step is probably to log the cookies before returning the redirect, and at the top of /oauth/google/callback that will help pinpoint where the cookies are getting dropped

ambergristle•2w ago

it seems like hono should be passing along any cookies when you use c.redirect: https://github.com/honojs/hono/blob/5473682ba0d768c345e2e06e6620fa6d52035fd5/src/context.ts#L655

GitHub

hono/src/context.ts at 5473682ba0d768c345e2e06e6620fa6d52035fd5 · ...

Web framework built on Web Standards. Contribute to honojs/hono development by creating an account on GitHub.

nemoOP•2w ago

Tried logging like this:

auth.get("/oauth/google/callback", async (c) => {
  const code = c.req.query("code");
  console.log("getCookie", getCookie(c));

auth.get("/oauth/google/callback", async (c) => {
  const code = c.req.query("code");
  console.log("getCookie", getCookie(c));

And getting empty array.

ambergristle•2w ago

That’s probably your issue then. Are cookies available before the redirect?

nemoOP•2w ago

No. It's not available before exchange also. I can't wrap my head around on how it worked last night!

ambergristle•2w ago

hmmm. did you make changes to the client instantiation?

nemoOP•2w ago

No. I changed nothing. Restarted my PC just in case. Worked once, then back to this. Could be some issue with local environment? Ref: https://github.com/supabase/supabase/discussions/21183#discussioncomment-12293822

GitHub

SvelteKit + Google Auth: invalid request: both auth code and code v...

I created a new repo this morning that only has the code suggestions from https://supabase.com/docs/guides/auth/server-side/creating-a-client?framework=sveltekit and using a local DB with Google oA...

ambergristle•2w ago

both /oauth/google and /oauth/google have the same base url though, right?

nemoOP•2w ago

Yes. Both have the same base URL.

ambergristle•2w ago

what does data log?

nemoOP•2w ago

In the callback, data does not log anything because Supabase is throwing the error and the error is getting logged.

ambergristle•2w ago

i meant in /oauth/google, sorry we established that the cookies are missing before the callback is called, so we can ignore that for now

Gaming

Programming

Hono Supabase OAuth Error

Did you find this page helpful?