Authentication Issue with Supabase in Plasmic – Redirect URL on Password Reset

Developer Support
1

Hello everyone,

I’m facing an issue with authentication in Plasmic using Supabase. I’m utilizing email and password authentication via Plasmic’s Headless API.

Authentication works fine, but when I use the “Forgot Password” feature, the reset password email directs me to the login page without prompting for a password update. Additionally, I’m unable to change the redirect URL from '/' to '/updatepassword'.

I’ve attempted to modify this in Supabase but haven’t succeeded. Below is my middleware.js configuration:

import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

const loginPage = '/login'
const dashboardPage = '/'
const emailConfirmationPage = '/verify-email'
const signupPage = '/signup'

const publicRoutes = [
  '/login',
  '/signup',
  "/forgotpassword",
  '/plasmic-host',
  '/verify-email',
]

export async function middleware(request: NextRequest) {
  // Check for authentication code in URL
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')
  
  // If there's an auth code, allow the request to proceed
  if (code) {
    return NextResponse.next()
  }

  let supabaseResponse = NextResponse.next({
    request,
  })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

  const {
    data: { user },
    error
  } = await supabase.auth.getUser()

  const currentPath = request.nextUrl.pathname

  // Handle protected routes
  if (!user && !publicRoutes.includes(currentPath)) {
    const url = request.nextUrl.clone()
    url.pathname = loginPage
    url.searchParams.set('redirectTo', currentPath)
    return NextResponse.redirect(url)
  }

  if (user?.email_confirmed_at && 
     (currentPath === loginPage || 
      currentPath === signupPage || 
      currentPath === emailConfirmationPage || 
      currentPath === "/forgotpassword")) {
    const url = request.nextUrl.clone()
    url.pathname = dashboardPage
    return NextResponse.redirect(url)
  }

  return supabaseResponse
}

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
}

All pages and components are built in Plasmic Studio.

Has anyone encountered a similar issue? How can I modify the password reset flow to properly update the password and redirect to /updatepassword instead of the login page?

Any guidance would be greatly appreciated. Thanks in advance!

2

I am follow this Article with some modification in middleware.ts

3

Hi,

I believe the issue is because of:

Since you aren’t considering the /updatepassword in public routes your middleware is redirecting to the loginPage. It’s not visible in the snippets of code that you shared but I suggest you do some research on how to handle passwords updates properly so that you don’t create a vulnerability.