Next.js Discord

Discord Forum

🛠️ Supabase password reset stuck at “Resetting password…” — following official PKCE flow

Unanswered
Cane di Oropa posted this in #help-forum
Open in Discord
Cane di OropaOP
I’m implementing Supabase password reset in a Next.js project using the PKCE flow as shown in the official guide:
đź”— https://supabase.com/docs/guides/auth/passwords?flow=pkce#resetting-a-password

The reset process works up to a point:
1. The user requests a password reset email
2. They receive the email and click the magic link
3. The link hits my /auth/confirm route → confirms the token via verifyOtp
4. It redirects to /auth/reset-password
5. Then it gets stuck at “Resetting password…”

4 Replies

Cane di OropaOP
Functions i use to send and reset password:

  const sendResetPasswordEmail = async (email: string) => {
    const { error } = await supabase.auth.resetPasswordForEmail(email)
    return { error }
  }

  const resetPassword = async (password: string) => {
    const { error } = await supabase.auth.updateUser({ 
      password: password 
    })
    return { error }
  }
confirm/route.ts

import { type EmailOtpType } from "@supabase/supabase-js"
import { type NextRequest } from "next/server"
import { supabase } from "@/lib/supabase"
import { redirect } from "next/navigation"

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url)
  const token_hash = searchParams.get("token_hash")
  const type = searchParams.get("type") as EmailOtpType | null
  const next = searchParams.get("next") ?? "/"

  if (token_hash && type) {
    const { error } = await supabase.auth.verifyOtp({ type, token_hash })
    if (!error) {
      redirect(next)
    }
  }

  redirect("/auth/auth-code-error")
}
the function that manages the handle submit and is where the system gets stuck

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()
  setLoading(true)
  setError("")

  if (!password || !confirmPassword) {
    setError("Please fill in all fields")
    setLoading(false)
    return
  }

  if (password.length < 6) {
    setError("Password must be at least 6 characters long")
    setLoading(false)
    return
  }

  if (password !== confirmPassword) {
    setError("Passwords do not match")
    setLoading(false)
    return
  }

  console.log("Resetting password...")
  const { error } = await resetPassword(password)
  console.log("Reset password response:", error)

  if (error) {
    setError(error.message)
  } else {
    setSuccess(true)
    setTimeout(() => {
      router.push("/dashboard")
    }, 2000)
  }

  setLoading(false)
}
Cane di OropaOP
Stuff i have noticed, the router.ts i able to successfully log the session