Subscribe
Sign in
Supabase
The open source Firebase alternative
Start new thread
Jonny Summers-Muir

Pre-built Auth UI for React - Install Auth UI and start authenticating users with Supabase

by
Top Product
Auth UI is a pre-built React component for authenticating users with Supabase Auth. It supports custom themes and extensible styles to match your brand and aesthetic.

Add a comment

Replies

Best
Ant Wilson
Top Product
The mac theme is my favorite haha
Egor Romanov
@antwilson oh, I love it so much too
Thor Schaeff
Top Product
Maker
@antwilson reminds me of something 😂
Jonny Summers-Muir
Top Product
Maker
@antwilson @schaeff_t I should of added that this was quite inspired by Stripe Elements :D
Jonny Summers-Muir
Top Product
Maker
@antwilson wonder who made these... 👀
Collin Thompson
@antwilson thank you, I can’t express to you in words how helpful this is. Nice work! I’m gonna try it out now.
Jonny Summers-Muir
Top Product
Maker
Hey friends! 👋 (It's been a while!) Some of you may already know, Auth UI started out as a component called `Auth` in our Supabase UI GitHub repository. We saw lots of developers we're using the (quite large) `supabase/ui` package just so they could use the Auth component. We decided to double down our efforts on that component, we moved it to it's own repository, and renamed it Auth UI. We've also added a bunch of features developers we're demanding from us... 💅 Pre built themes
 - We will be making pre-made themes so you can get going right away. No styling necessary.
 🧰 Extend appearance of theme - 
Not happy with the prebuilt themes? Override variables from prebuilt themes with your own styles. 🌓 Theme sets (dark mode) - 
Extend and configure multiple sets of styles in a single theme. That means you can include dark mode, light mode, sepia mode...
 ✏️ Custom css classes and inline styles - Inject css classes so you can target specific elements and also inline styles. A prepended ClassName can also be added to all elements. 📣 Custom labels - 
Use your own text for any of the labels, so you can now accommodate for various languages, or perhaps different tones of voice. What's the future of Auth UI? We'd like to keep working on this and improve it for more use cases such as: 📞 Phone auth - Support for Supabase Phone Auth, so a user can input their OTP into the Auth UI to log in. 🏗 More frameworks - We've only shipped React so far, but we've had requests for Svelte and Flutter support. 🪪 Profile UI - Perhaps prebuilt UI for viewing user information, user profile, and user actions to update password, update details and so on. One more thing...It's all open source. View all the code here right now on GitHub. Also a shout out to stiches.js. We used it to make the customization part possible. 🪡 --- Thanks everyone. Feel free to leave your positive (and negative) feedback and comments. Jonny, Supabase team
Rohan Chaubey
@jon_summers_muir Congrats. Discovered the product on our Invincible Product Hunters community. :)
Uladzimir Yankovich
@jon_summers_muir Hi, great product. Tell me, do you have an out-of-the-box authorization solution for V3 browser extensions?
Jonny Summers-Muir
Top Product
Maker
@rohanrecommends ahh great. Thor shared it I think?
Ant Wilson
Top Product
@jon_summers_muir the theming is very cool
Fares
@jon_summers_muir Congratulations on the launch 🚀
Inian Parameshwaran
Top Product
What was the rationale behind deprecating supabase/ui and splitting auth UI to its own package?
Jonny Summers-Muir
Top Product
Maker
hey @everconfusedguy ! Some of you may already know, but Auth UI was a component called `Auth` in our Supabase UI GitHub repository. To my genuine surprise (I didn't think anyone would use it) we saw a lot of developers using the component in their own apps without using any other components. They were also applying custom hacks to change various styling or to replace text in the labels. It made sense to properly support the Auth component as a standalone package, and also remove it from a package that was primarily a library of radix react components that were styled with tailwind. We also didn't want to force developers to use Tailwind just to install a UI component. Now that it is in its own repo and package, we can probably also think about supporting other frameworks more easily like Svelte and Flutter.
Ant Wilson
Top Product
@everconfusedguy @jon_summers_muir good point on the future repurposing
Thor Schaeff
Top Product
Maker
@everconfusedguy @jon_summers_muir also would love to get the Vue community involved with this 🥳
PJ Manning
@everconfusedguy @jon_summers_muir I think you forgot to mention Vue ;)
Joshen Lim
Top Product
This looks really amazing! Is there a possible timeline for when support for Flutter might be ready? Keen to try it out in my next project
Jonny Summers-Muir
Top Product
Maker
@joshenjlek I'll check the issues in GitHub, we had a contributor that might had been interested in porting this to flutter. Will need to have a look.
Thor Schaeff
Top Product
Maker
@joshenjlek Flutter Auth UI is being worked on here: https://github.com/supabase-comm... Thanks to many awesome community contributors 💚
Ant Wilson
Top Product
@joshenjlek +1 for flutter version
Ant Wilson
Top Product
@joshenjlek @schaeff_t great stuff!
Thor Schaeff
Top Product
Maker
Hey friends, we're constantly aiming to make Auth as easy as possible and this is another step into that direction. Let us know if this is useful for you and what features you would like to see. Thanks :)
Jonny Summers-Muir
Top Product
Maker
@schaeff_t 🙌🙌🙌
Ant Wilson
Top Product
Tyler Shukert
Will there be docs around how to use this auth UI library?
Jonny Summers-Muir
Top Product
Maker
@dshukertjr Absolutely. I made a start on the Auth UI docs here. Would welcome any edits as well
Kang Ming
So excited for this! Can't wait to see how other devs will use this together with supabase-auth! :)
Jonny Summers-Muir
Top Product
Maker
@kang_ming_tay already got some feedback about docs I think 😅
Ant Wilson
Top Product
@kang_ming_tay @jon_summers_muir #buildinpublic makes for epic feedback cycles!
Egor Romanov
Looks fantastic, can't wait to use Svelte version!
Jonny Summers-Muir
Top Product
Maker
@egor_romanov There was a Supabase UI Svelte version knocking around, I'll have to see who it was and see if they want to get involved, would speed up development a lot!
Egor Romanov
@jon_summers_muir wow, that’s great, Supabase community is the best 💯
Alaister Young
Very happy to see a new version of Auth UI to go along with V2 of supabase-js!
Jonny Summers-Muir
Top Product
Maker
@alaisteryoung upgraded it now to v2. Courtesy of Thor!
Pavel Borisov
Nice to see this as an open-source feature. Cool! Congrats!
Ramiro Nuñez Dosio
Love to see this one out! Auth UI is a great and fast way to get auth working while also matching your brand and aesthetic 🤝💯 Can't wait to see what the community builds with it!
Jonny Summers-Muir
Top Product
Maker
@ramiro_nunez_dosio yea, the theming was such a big request. Everybody needs it really.
Andrii Bas
thanks a lot. Love Supabase, it's awesome 😍
Jonny Summers-Muir
Top Product
Maker
@bass_andriy woop! that's great. thanks!
Ant Wilson
Top Product
@bass_andriy thanks for the support Andriy!
Kiran K
Looks great! I've used the Supabase UI with a Next.js project. It was simple and easy to use. Auth UI looks awesome.
Jonny Summers-Muir
Top Product
Maker
@kiran_k1 Oh nice! Would you be up for migrating to this new version? Would love to hear what it was like, we might need a migration guide.
Kiran K
@jon_summers_muir Sure, I'll try out the new Auth UI when I've time. A migration guide would be valuable.
kiwicopple
Top Product
This is cool @jon_summers_muir , but wen Auth Pages?
Jonny Summers-Muir
Top Product
Maker
@copple I heard a launch week 6 rumour 😉
Ant Wilson
Top Product
Ivan Kavalerov
Love this! I have so many snippets of code for this that I am taking from project to project, glad to see this done properly in a such a modular way. (And yes, Mac theme is the best 😅)
Jonny Summers-Muir
Top Product
Maker
@flybirdx101 Haven't actually added the mac theme into the repo yet, I'll get round to it at some point 😅
Ivan Kavalerov
@jon_summers_muir I know, just @antwilson 's screenshot in the other thread was very convincing :)
Joshen
Supabase's auth has been super easy to use, and this just puts the cherry on top - great stuff!
Rahul Mehta
Interesting for React developers. Congratulations on the launch!
Jonny Summers-Muir
Top Product
Maker
Paul Cioanca
This looks amazing! The added theming flexibility, and that it got spun out due to how developers were previously using it, is just fantastic. Love that the community has a voice when it comes to Supabase!
Jonny Summers-Muir
Top Product
Maker
@_pcnc There were a few issues popping up on GitHub and I was also seeing some weird hacks developers were trying just to do something like change a label. Hopefully this is a step in the right direction 😅
Bo Lu
That looks great! Is there any demo sites using Auth UI?
Jonny Summers-Muir
Top Product
Maker
@bo_lu2 For the new version, will have to have a look, can't remember off the top of my head. I'll be checking this list.. https://github.com/supabase-comm...
Monica Khoury
Super cool! Really well done, can't wait to use it!
Jonny Summers-Muir
Top Product
Maker
@monicakhprivate thanks so much!