Hono•2mo 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?

32 Replies

Arjix•2mo 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•2mo ago

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

Arjix•2mo 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•2mo 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•2mo ago

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

nemoOP•2mo ago

I am not able to get anything after the #

Arjix•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo ago

I'll delete it later

ambergristle•2mo 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•2mo 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•2mo ago

dope! glad yo hear you got it working

nemoOP•2mo 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•2mo 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•2mo 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•2mo 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•2mo ago

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

nemoOP•2mo ago

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

ambergristle•2mo ago

hmmm. did you make changes to the client instantiation?

nemoOP•2mo 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•2mo ago

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

nemoOP•2mo ago

Yes. Both have the same base URL.

ambergristle•2mo ago

what does data log?

nemoOP•5w ago

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

ambergristle•5w 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

nemoOP•4w ago

Not sure why! But the data is empty. Sorry. I got so frustrated that I stopped working on it for a while.

ambergristle•4w ago

no worries! we've all been there you're saying that data here is undefined?

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

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

nemoOP•4w ago

Not undefined. Sometimes it logs the redirect URI, and sometimes or most of the times, nothing is getting logged for some reason. Maybe something with the middleware?

ambergristle•4w ago

interesting. does error log anything? seems like we're narrowing in on the issue though. sign-in isn't working as expected

Gaming

Programming

Hono Supabase OAuth Error

Did you find this page helpful?