2 replies

Best practice for preserving intended URL when redirecting unauthenticated users in Better Auth

When an unauthenticated user visits a protected page (e.g.

/dashboard

/dashboard

), my Next.js middleware detects that they are not signed in and redirects them to my sign-in page at

/sign-in

/sign-in

.

A common practice is to preserve the original URL in a query parameter, such as

/sign-in?redirect_url=/dashboard

/sign-in?redirect_url=/dashboard

, so that after the user successfully authenticates, they can be redirected back to the page they originally tried to visit.

What is the best practice to implement this pattern when using Better Auth?

Here is the approach I have come up with so far:

Middleware:

import { NextRequest, NextResponse } from 'next/server'
import { getSessionCookie } from 'better-auth/cookies'

export async function middleware(request: NextRequest) {
  const sessionCookie = getSessionCookie(request)

  if (!sessionCookie) {
    const redirectUrl = encodeURIComponent(request.nextUrl.pathname + request.nextUrl.search)
    const signInUrl = new URL(`/sign-in?redirect_url=${redirectUrl}`, request.url)

    return NextResponse.redirect(signInUrl)
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard(.*)'], 
}

import { NextRequest, NextResponse } from 'next/server'
import { getSessionCookie } from 'better-auth/cookies'

export async function middleware(request: NextRequest) {
  const sessionCookie = getSessionCookie(request)

  if (!sessionCookie) {
    const redirectUrl = encodeURIComponent(request.nextUrl.pathname + request.nextUrl.search)
    const signInUrl = new URL(`/sign-in?redirect_url=${redirectUrl}`, request.url)

    return NextResponse.redirect(signInUrl)
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard(.*)'], 
}

Sign-in handling:

const searchParams = new URLSearchParams(window.location.search)
const redirectUrl = searchParams.get('redirect_url') ?? '/dashboard'

const { error } = await authClient.signIn.email(
  {
    email: values.email,
    password: values.password,
    callbackURL: redirectUrl,
  },
  {
    onRequest: () => setPending(true),
    onResponse: () => setPending(false),
  }
)

const searchParams = new URLSearchParams(window.location.search)
const redirectUrl = searchParams.get('redirect_url') ?? '/dashboard'

const { error } = await authClient.signIn.email(
  {
    email: values.email,
    password: values.password,
    callbackURL: redirectUrl,
  },
  {
    onRequest: () => setPending(true),
    onResponse: () => setPending(false),
  }
)

Is this approach correct and safe when using Better Auth? Are there recommended patterns to handle this flow?

Best practice for preserving intended URL when redirecting unauthenticated users in Better Auth

When an unauthenticated user visits a protected page (e.g.

/dashboard

/dashboard

), my Next.js middleware detects that they are not signed in and redirects them to my sign-in page at

/sign-in

/sign-in

.

A common practice is to preserve the original URL in a query parameter, such as

/sign-in?redirect_url=/dashboard

/sign-in?redirect_url=/dashboard

import { NextRequest, NextResponse } from 'next/server'
import { getSessionCookie } from 'better-auth/cookies'

export async function middleware(request: NextRequest) {
  const sessionCookie = getSessionCookie(request)

  if (!sessionCookie) {
    const redirectUrl = encodeURIComponent(request.nextUrl.pathname + request.nextUrl.search)
    const signInUrl = new URL(`/sign-in?redirect_url=${redirectUrl}`, request.url)

    return NextResponse.redirect(signInUrl)
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard(.*)'], 
}

import { NextRequest, NextResponse } from 'next/server'
import { getSessionCookie } from 'better-auth/cookies'

export async function middleware(request: NextRequest) {
  const sessionCookie = getSessionCookie(request)

  if (!sessionCookie) {
    const redirectUrl = encodeURIComponent(request.nextUrl.pathname + request.nextUrl.search)
    const signInUrl = new URL(`/sign-in?redirect_url=${redirectUrl}`, request.url)

    return NextResponse.redirect(signInUrl)
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard(.*)'], 
}

Sign-in handling:

const searchParams = new URLSearchParams(window.location.search)
const redirectUrl = searchParams.get('redirect_url') ?? '/dashboard'

const { error } = await authClient.signIn.email(
  {
    email: values.email,
    password: values.password,
    callbackURL: redirectUrl,
  },
  {
    onRequest: () => setPending(true),
    onResponse: () => setPending(false),
  }
)

const searchParams = new URLSearchParams(window.location.search)
const redirectUrl = searchParams.get('redirect_url') ?? '/dashboard'

const { error } = await authClient.signIn.email(
  {
    email: values.email,
    password: values.password,
    callbackURL: redirectUrl,
  },
  {
    onRequest: () => setPending(true),
    onResponse: () => setPending(false),
  }
)

Is this approach correct and safe when using Better Auth? Are there recommended patterns to handle this flow?

Best practice for preserving intended URL when redirecting unauthenticated users in Better Auth

Best practice for preserving intended URL when redirecting unauthenticated users in Better Auth

Similar Threads