Example with Supabase AUTH

[CarlosZiegler]

Hey! I am playing with HONO and created an example using SUPABASE for AUTH, I will deploy it with docker, this is a "Work in Progress" some feedback are welcome.

Built With: -Node.js -PNPM -TypeScript -Supabase -Drizzle -Zod -Vitest -Biome -Sentry

Link : https://github.com/CarlosZiegler/hono-supabase

[rafaell-lycan]

Hey @CarlosZiegler that's quite nice! 👍

I think this would be a nice idea for creating an article or a Guide on how to build an app from scratch.

@yusukebe wdyt?

[firstian]

Two improvements I can see:

• It doesn't use the newer ssr package, which has a different API.
• On refresh, the code doesn't seem to update the cookie sent back to the client.

I hacked a version based on yours with the above changes. If you want I can make a PR and send your way.

[CarlosZiegler]

@firstian go ahead!!!

[firstian]

I found some bugs with the middleware code provided by Supabase doc. I'll need to debug it enough to be able to proceed. That sample code seems to not work when the cookie is chunked.

[omesh845]

Hi, I'm trying to connect HONO with Supabase as the backend and Next.js as the frontend. How do I connect them and verify the JWT that comes to the backend with Supabase?

@CarlosZiegler @firstian .

[firstian]

You can look at the repo linked in OP to see how it works. The gist is to create the server client with the callbacks to get/set/delete cookies, and then call getUser() to validate the cookie before returning from the middleware.

[omesh845]

Thanks! I am new to web development, and while this looks very good, the packages used don't seem to be the latest versions, which is a bit overwhelming for me.

I'm unsure about the best approach for handling authentication. Should I:

1. Authenticate directly from Next.js to Supabase and then verify the token in the Hono backend?
2. Handle the entire authentication and verification process in the Hono backend?

Which method is more developer-friendly, or is there a commonly used method? How should I go about implementing it?

[firstian]

Thanks! I am new to web development, and while this looks very good, the packages used don't seem to be the latest versions, which is a bit overwhelming for me.

I'm unsure about the best approach for handling authentication. Should I:

1. Authenticate directly from Next.js to Supabase and then verify the token in the Hono backend?
2. Handle the entire authentication and verification process in the Hono backend?

Which method is more developer-friendly, or is there a commonly used method? How should I go about implementing it?

If you're using Supabase as the auth backend, then you're doing 1. Not sure what you mean by "handle the entire process in Hono backend." Do you mean creating your own JWT in the hono backend? That wouldn't be using Supabase as your auth backend, no?

[omesh845]

Uhm, ok, so how do setup my authentication (using supabase) safe, please point me right way.

Also could you share code for your new improved version you mentioned in previous post.

[firstian]

The docs are here: https://supabase.com/docs/reference/javascript/auth-api

If you're not familiar with auth, it's a bit hard to understand. If you want to use social login, you should look at that part of the doc specifically, because the flow is a little different. I suggest you just get auth working with a normal page first. Only after that you try and wire in Hono.