github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-24 08:01:56 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

[GH-ISSUE #114] project: provide prebuilt UI components #8130

New Issue
Closed
opened 2026-04-13 03:12:31 -05:00 by GiteaMirror · 12 comments
GiteaMirror commented 2026-04-13 03:12:31 -05:00
Owner
Copy Link

Originally created by @Bekacru on GitHub (Oct 7, 2024).
Original GitHub issue: https://github.com/better-auth/better-auth/issues/114

Provide prebuilt UI components that users can easily copy into their projects that includes the auth logic required for the frontend.

Motivation

Auth-related UI components tend to be repetitive, and recreating them from scratch every time is unnecessary. But, it's important to have the flexibility to personalize these components to match the look and feel of your website. Providing prebuilt components that can be easily copied and customized offers the best of both worlds.

things to consider

  • Components should rely on Tailwind CSS and shadcn.
  • Ensure to support multiple frameworks, not just React.
  • Add a section on the website similar to shadcn blocks where users can preview components and copy the code.
  • Optionally, include a CLI option for installing the components.
  • Consider adding an option for customizable theming.
Originally created by @Bekacru on GitHub (Oct 7, 2024). Original GitHub issue: https://github.com/better-auth/better-auth/issues/114 Provide prebuilt UI components that users can easily copy into their projects that includes the auth logic required for the frontend. **Motivation** Auth-related UI components tend to be repetitive, and recreating them from scratch every time is unnecessary. But, it's important to have the flexibility to personalize these components to match the look and feel of your website. Providing prebuilt components that can be easily copied and customized offers the best of both worlds. **things to consider** - Components should rely on Tailwind CSS and shadcn. - Ensure to support multiple frameworks, not just React. - Add a section on the website similar to shadcn blocks where users can preview components and copy the code. - Optionally, include a CLI option for installing the components. - Consider adding an option for customizable theming.
GiteaMirror added the locked label 2026-04-13 03:12:31 -05:00
GiteaMirror commented 2026-04-13 03:12:32 -05:00
Author
Owner
Copy Link

@Masood-ul-Rehman commented on GitHub (Oct 20, 2024):

Hey @Bekacru I am interested in working on this
My Proposal:
My suggestion is creating a page on landing page, named auth designs or something like this there we can display 3 different designs for auth pages, user can slect any design, after that we will show what they need to get started like install and initalize shadcn, intall tailwind etc, then add the command for adding the shadcn components we are going to use, then below that there will be code for a component named auth and user can copy the code and can use it, in future we can add editor and live preview as well, what do you think let me know
PS. I worked on one previous issue as well and it was merged and I can pull this off as well
Thanks

<!-- gh-comment-id:2424847021 --> @Masood-ul-Rehman commented on GitHub (Oct 20, 2024): Hey @Bekacru I am interested in working on this **My Proposal:** My suggestion is creating a page on landing page, named auth designs or something like this there we can display 3 different designs for auth pages, user can slect any design, after that we will show what they need to get started like install and initalize shadcn, intall tailwind etc, then add the command for adding the shadcn components we are going to use, then below that there will be code for a component named auth and user can copy the code and can use it, in future we can add editor and live preview as well, what do you think let me know PS. I worked on one previous issue as well and it was merged and I can pull this off as well Thanks
GiteaMirror commented 2026-04-13 03:12:34 -05:00
Author
Owner
Copy Link

@t3duk commented on GitHub (Oct 21, 2024):

could maybe integrate with the shadcn cli?

<!-- gh-comment-id:2427901307 --> @t3duk commented on GitHub (Oct 21, 2024): could maybe integrate with the shadcn cli?
GiteaMirror commented 2026-04-13 03:12:35 -05:00
Author
Owner
Copy Link

@Masood-ul-Rehman commented on GitHub (Oct 22, 2024):

@t3duk yes we can do that as well that would be easier

<!-- gh-comment-id:2429645248 --> @Masood-ul-Rehman commented on GitHub (Oct 22, 2024): @t3duk yes we can do that as well that would be easier
GiteaMirror commented 2026-04-13 03:12:35 -05:00
Author
Owner
Copy Link

@Masood-ul-Rehman commented on GitHub (Oct 23, 2024):

@Bekacru do you have any feedback on the above proposal?

<!-- gh-comment-id:2431417745 --> @Masood-ul-Rehman commented on GitHub (Oct 23, 2024): @Bekacru do you have any feedback on the above proposal?
GiteaMirror commented 2026-04-13 03:12:35 -05:00
Author
Owner
Copy Link

@nahtnam commented on GitHub (Oct 27, 2024):

Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves

<!-- gh-comment-id:2439875540 --> @nahtnam commented on GitHub (Oct 27, 2024): Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves
GiteaMirror commented 2026-04-13 03:12:35 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Oct 27, 2024):

Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves

This won't be bundled with the library or hosted on the main domain. It’s just to provide a high-quality UI, built with shadcn, that you can copy and customize as needed.

<!-- gh-comment-id:2439886425 --> @Bekacru commented on GitHub (Oct 27, 2024): > Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves This won't be bundled with the library or hosted on the main domain. It’s just to provide a high-quality UI, built with shadcn, that you can copy and customize as needed.
GiteaMirror commented 2026-04-13 03:12:36 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Oct 27, 2024):

Hey @Bekacru I am interested in working on this My Proposal: My suggestion is creating a page on landing page, named auth designs or something like this there we can display 3 different designs for auth pages, user can slect any design, after that we will show what they need to get started like install and initalize shadcn, intall tailwind etc

It won’t be included in the main docs, instead, it’ll be hosted separately, possibly at something like ui.better-auth.com. Feel free to give it a try, but there's someone else also working on it.

<!-- gh-comment-id:2439886836 --> @Bekacru commented on GitHub (Oct 27, 2024): > Hey @Bekacru I am interested in working on this **My Proposal:** My suggestion is creating a page on landing page, named auth designs or something like this there we can display 3 different designs for auth pages, user can slect any design, after that we will show what they need to get started like install and initalize shadcn, intall tailwind etc It won’t be included in the main docs, instead, it’ll be hosted separately, possibly at something like `ui.better-auth.com`. Feel free to give it a try, but there's someone else also working on it.
GiteaMirror commented 2026-04-13 03:12:36 -05:00
Author
Owner
Copy Link

@nahtnam commented on GitHub (Oct 27, 2024):

Interesting. As an alternative feature request, one of the things I found most valuable about authjs was the ability to just define a few oauth providers, and not have to build a UI. For small apps or POC apps, it helps remove the need to build a sign up page, sign in page, forgot password page, and a bunch of other stuff. Instead you just create a route

export const GET = authClient.createAuthPages()
<!-- gh-comment-id:2439887173 --> @nahtnam commented on GitHub (Oct 27, 2024): Interesting. As an alternative feature request, one of the things I found most valuable about authjs was the ability to just define a few oauth providers, and not have to build a UI. For small apps or POC apps, it helps remove the need to build a sign up page, sign in page, forgot password page, and a bunch of other stuff. Instead you just create a route ``` export const GET = authClient.createAuthPages() ```
GiteaMirror commented 2026-04-13 03:12:36 -05:00
Author
Owner
Copy Link

@Masood-ul-Rehman commented on GitHub (Oct 27, 2024):

Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves

This won't be bundled with the library or hosted on the main domain. It’s just to provide a high-quality UI, built with shadcn, that you can copy and customize as needed.

@Bekacru who's working on it maybe I can work with him?

<!-- gh-comment-id:2439903827 --> @Masood-ul-Rehman commented on GitHub (Oct 27, 2024): > > Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves > > This won't be bundled with the library or hosted on the main domain. It’s just to provide a high-quality UI, built with shadcn, that you can copy and customize as needed. @Bekacru who's working on it maybe I can work with him?
GiteaMirror commented 2026-04-13 03:12:37 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Oct 27, 2024):

Interesting. As an alternative feature request, one of the things I found most valuable about authjs was the ability to just define a few oauth providers, and not have to build a UI. For small apps or POC apps, it helps remove the need to build a sign up page, sign in page, forgot password page, and a bunch of other stuff. Instead you just create a route

export const GET = authClient.createAuthPages()

good suggestion. and I can see it being more useful or something liek an admin dashboard too.

<!-- gh-comment-id:2439924343 --> @Bekacru commented on GitHub (Oct 27, 2024): > Interesting. As an alternative feature request, one of the things I found most valuable about authjs was the ability to just define a few oauth providers, and not have to build a UI. For small apps or POC apps, it helps remove the need to build a sign up page, sign in page, forgot password page, and a bunch of other stuff. Instead you just create a route > > ``` > export const GET = authClient.createAuthPages() > ``` good suggestion. and I can see it being more useful or something liek an admin dashboard too.
GiteaMirror commented 2026-04-13 03:12:37 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Oct 27, 2024):

Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves

This won't be bundled with the library or hosted on the main domain. It’s just to provide a high-quality UI, built with shadcn, that you can copy and customize as needed.

@Bekacru who's working on it maybe I can work with him?

@Kinfe123

<!-- gh-comment-id:2439924379 --> @Bekacru commented on GitHub (Oct 27, 2024): > > > Personally I prefer the way authjs/supabase auth work. A very simple auto-generated page or component with very minimal design. If a user wants to customize it more than some basic colors and border radius, they likely want more control and should build it themselves > > > > > > This won't be bundled with the library or hosted on the main domain. It’s just to provide a high-quality UI, built with shadcn, that you can copy and customize as needed. > > @Bekacru who's working on it maybe I can work with him? @Kinfe123
GiteaMirror commented 2026-04-13 03:12:37 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Dec 5, 2024):

implemented

<!-- gh-comment-id:2519600960 --> @Bekacru commented on GitHub (Dec 5, 2024): implemented
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No Label locked
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#8130
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?