github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-29 18:36:34 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

[GH-ISSUE #4719] Redirect or Popup authentication flow? #18664

New Issue
Closed
opened 2026-04-15 17:13:42 -05:00 by GiteaMirror · 3 comments
GiteaMirror commented 2026-04-15 17:13:42 -05:00
Owner
Copy Link

Originally created by @mrayushmehrotra on GitHub (Sep 17, 2025).
Original GitHub issue: https://github.com/better-auth/better-auth/issues/4719

right now in better auth, is there any way to change the redirect authentication flow to popup (new window) auth flow ?

Originally created by @mrayushmehrotra on GitHub (Sep 17, 2025). Original GitHub issue: https://github.com/better-auth/better-auth/issues/4719 right now in better auth, is there any way to change the redirect authentication flow to popup (new window) auth flow ?
GiteaMirror added the locked label 2026-04-15 17:13:42 -05:00
GiteaMirror commented 2026-04-15 17:13:44 -05:00
Author
Owner
Copy Link

@dosubot[bot] commented on GitHub (Sep 17, 2025):

Hi @mrayushmehrotra! I'm Dosu and I’m helping the better-auth team.

Better Auth supports popup authentication flows, but this is controlled from the frontend using the client SDKs (like React, Svelte, Vue, etc.), not via a backend or universal config. There isn’t a backend setting to switch all authentication to popup. Instead, you can trigger popup auth by using the relevant APIs, hooks, or props in your frontend SDK. This approach is commonly used for OAuth and social login flows, and is the recommended way to implement popup authentication in Better Auth. For more details on handling frontend-driven redirects and customizing the flow, see this discussion.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

<!-- gh-comment-id:3302472048 --> @dosubot[bot] commented on GitHub (Sep 17, 2025): <!-- Greeting --> Hi @mrayushmehrotra! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the better-auth team. <!-- Answer --> Better Auth supports popup authentication flows, but this is controlled from the frontend using the client SDKs (like React, Svelte, Vue, etc.), not via a backend or universal config. There isn’t a backend setting to switch all authentication to popup. Instead, you can trigger popup auth by using the relevant APIs, hooks, or props in your frontend SDK. This approach is commonly used for OAuth and social login flows, and is the recommended way to implement popup authentication in Better Auth. For more details on handling frontend-driven redirects and customizing the flow, see [this discussion](https://github.com/better-auth/better-auth/issues/3862). <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/742236f4-ed25-4d50-bb8a-5aa950174883?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/cdda13d9-dd27-4d31-b09a-5d8bec92de21/ask?utm_source=github)&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/better-auth/better-auth/issues/4719)
GiteaMirror commented 2026-04-15 17:13:44 -05:00
Author
Owner
Copy Link

@camdowney commented on GitHub (Sep 17, 2025):

Yes, you just need to use the data.url returned from authClient.signin.social and also pass in disableRedirect: true.

This is what my social sign in function looks like:

export const socialSignIn = async (provider: 'google' | 'discord') => {
  const { data } = await authClient.signIn.social({
    provider,
    callbackURL: `${window.location.origin}/oauth-success?redirect_url=${window.location.href}`,
    disableRedirect: true,
  })

  if (!data || !data.url) return

  openAuthWindow(data.url)
}

export const openAuthWindow = (authUrl: string) => {
  const authWindow = openCenteredWindow(authUrl, 'oauth_popup', 500, 600)

  if (!authWindow) {
    window.location.href = authUrl
    return
  }

  window.addEventListener('message', (event) => {
    if (event.origin !== window.location.origin) return

    if (event.data === 'oauth-success') {
      authWindow.close()
      window.location.reload()
    }
  })
}

export const openCenteredWindow = (url: string, title: string, width: number, height: number) => {
  if (!window || !window.top) return null

  const x = window.top.outerWidth / 2 + window.top.screenX - width / 2
  const y = window.top.outerHeight / 2 + window.top.screenY - height / 2

  return window.open(
    url,
    title,
    `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${y}, left=${x}`
  )
}

Not sure if there's a more concise way to open a pop-up but I think you get the idea. How you close the popup or handle redirecting afterward is up to you. You'll probably need to call a function like this on the page you redirect to afterwards though (for me, this is in oauth-success.astro):

export const closeAuthWindow = () => {
  if (!window.opener) return false

  window.opener.postMessage('oauth-success', window.location.origin)

  return true
}

Just be aware that mobile devices often won't open pop-ups, hence the need for this logic in openAuthWindow:

if (!authWindow) {
    window.location.href = authUrl
    return
}
<!-- gh-comment-id:3302972912 --> @camdowney commented on GitHub (Sep 17, 2025): Yes, you just need to use the `data.url` returned from `authClient.signin.social` and also pass in `disableRedirect: true`. This is what my social sign in function looks like: ```ts export const socialSignIn = async (provider: 'google' | 'discord') => { const { data } = await authClient.signIn.social({ provider, callbackURL: `${window.location.origin}/oauth-success?redirect_url=${window.location.href}`, disableRedirect: true, }) if (!data || !data.url) return openAuthWindow(data.url) } export const openAuthWindow = (authUrl: string) => { const authWindow = openCenteredWindow(authUrl, 'oauth_popup', 500, 600) if (!authWindow) { window.location.href = authUrl return } window.addEventListener('message', (event) => { if (event.origin !== window.location.origin) return if (event.data === 'oauth-success') { authWindow.close() window.location.reload() } }) } export const openCenteredWindow = (url: string, title: string, width: number, height: number) => { if (!window || !window.top) return null const x = window.top.outerWidth / 2 + window.top.screenX - width / 2 const y = window.top.outerHeight / 2 + window.top.screenY - height / 2 return window.open( url, title, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${y}, left=${x}` ) } ``` Not sure if there's a more concise way to open a pop-up but I think you get the idea. How you close the popup or handle redirecting afterward is up to you. You'll probably need to call a function like this on the page you redirect to afterwards though (for me, this is in oauth-success.astro): ```ts export const closeAuthWindow = () => { if (!window.opener) return false window.opener.postMessage('oauth-success', window.location.origin) return true } ``` Just be aware that mobile devices often won't open pop-ups, hence the need for this logic in `openAuthWindow`: ```ts if (!authWindow) { window.location.href = authUrl return } ```
GiteaMirror commented 2026-04-15 17:13:45 -05:00
Author
Owner
Copy Link

@mrayushmehrotra commented on GitHub (Sep 17, 2025):

Thanks man, @camdowney

<!-- gh-comment-id:3303300958 --> @mrayushmehrotra commented on GitHub (Sep 17, 2025): Thanks man, @camdowney
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#18664
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?