password reset returns Auth session missing

J

j4•7/19/24, 7:04 PM

That cookie doesn't look like an auth cookie. If you're using ssr v0.4.0, I suspect you need to upgrade to v0.4.1. There's a fix specifically for this issue, when using the

recovery

recovery

type in your email template.

It's a bit muffed up on npm, so you'll have to do

@supabase/ssr@patched

@supabase/ssr@patched

when upgrading/adding.

Jj4 That cookie doesn't look like an auth cookie. If you're using ssr v0.4.0, I susp...

T

tazioOP•7/19/24, 9:47 PM

i've updated to v0.4.1 and still gives me the error :/

app/auth/confirm/route.tsx

app/auth/confirm/route.tsx

import { type EmailOtpType } from "@supabase/supabase-js";
import { type NextRequest, NextResponse } from "next/server";

import { createClient } from "@/utils/supabase/server";

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") ?? "/";

    const redirectTo = request.nextUrl.clone();
    redirectTo.pathname = next;
    redirectTo.searchParams.delete("token_hash");
    redirectTo.searchParams.delete("type");

    if (token_hash && type) {
        const supabase = createClient();

        const { error } = await supabase.auth.verifyOtp({
            type,
            token_hash,
        });
        if (!error) {
            redirectTo.searchParams.delete("next");
            return NextResponse.redirect(redirectTo);
        }
    }

    // return the user to an error page with some instructions
    redirectTo.pathname = "/error";
    return NextResponse.redirect(redirectTo);
}

import { type EmailOtpType } from "@supabase/supabase-js";
import { type NextRequest, NextResponse } from "next/server";

import { createClient } from "@/utils/supabase/server";

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") ?? "/";

    const redirectTo = request.nextUrl.clone();
    redirectTo.pathname = next;
    redirectTo.searchParams.delete("token_hash");
    redirectTo.searchParams.delete("type");

    if (token_hash && type) {
        const supabase = createClient();

        const { error } = await supabase.auth.verifyOtp({
            type,
            token_hash,
        });
        if (!error) {
            redirectTo.searchParams.delete("next");
            return NextResponse.redirect(redirectTo);
        }
    }

    // return the user to an error page with some instructions
    redirectTo.pathname = "/error";
    return NextResponse.redirect(redirectTo);
}

import { type EmailOtpType } from "@supabase/supabase-js";
import { type NextRequest, NextResponse } from "next/server";

import { createClient } from "@/utils/supabase/server";

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") ?? "/";

    const redirectTo = request.nextUrl.clone();
    redirectTo.pathname = next;
    redirectTo.searchParams.delete("token_hash");
    redirectTo.searchParams.delete("type");

    if (token_hash && type) {
        const supabase = createClient();

        const { error } = await supabase.auth.verifyOtp({
            type,
            token_hash,
        });
        if (!error) {
            redirectTo.searchParams.delete("next");
            return NextResponse.redirect(redirectTo);
        }
    }

    // return the user to an error page with some instructions
    redirectTo.pathname = "/error";
    return NextResponse.redirect(redirectTo);
}

import { type EmailOtpType } from "@supabase/supabase-js";
import { type NextRequest, NextResponse } from "next/server";

import { createClient } from "@/utils/supabase/server";

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") ?? "/";

    const redirectTo = request.nextUrl.clone();
    redirectTo.pathname = next;
    redirectTo.searchParams.delete("token_hash");
    redirectTo.searchParams.delete("type");

    if (token_hash && type) {
        const supabase = createClient();

        const { error } = await supabase.auth.verifyOtp({
            type,
            token_hash,
        });
        if (!error) {
            redirectTo.searchParams.delete("next");
            return NextResponse.redirect(redirectTo);
        }
    }

    // return the user to an error page with some instructions
    redirectTo.pathname = "/error";
    return NextResponse.redirect(redirectTo);
}

T

tazioOP•7/19/24, 9:47 PM

app/auth/forget/update/actions.ts

app/auth/forget/update/actions.ts

"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { createClient } from "@/utils/supabase/server";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import { z } from "zod";
import { ApiReturn } from "@/utils/types";

const schema = z.object({
    password: z.string({
        invalid_type_error: "Invalid Password",
    }),
});

export async function resetPassword(
    prevState: any,
    formData: FormData,
): Promise<ApiReturn> {
    const validationFields = schema.safeParse({
        password: formData.get("password"),
    });

    if (!validationFields.success) {
        return {
            error: validationFields.error.errors[0].message,
            code: HttpStatusCode.BadRequest,
        };
    }

    console.log(validationFields.data);

    const { password } = validationFields.data;
    const supabase = createClient();

    const { error, data } = await supabase.auth.updateUser({
        password,
    });

    console.log(error, data);

    if (error) {
        return {
            error: error.message,
            code: error.status || HttpStatusCode.BadRequest,
        };
    }

    // revalidatePath("/", "layout");
    // redirect("/");

    return {
        message: "Password updated",
        code: HttpStatusCode.Ok,
    };
}

"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { createClient } from "@/utils/supabase/server";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import { z } from "zod";
import { ApiReturn } from "@/utils/types";

const schema = z.object({
    password: z.string({
        invalid_type_error: "Invalid Password",
    }),
});

export async function resetPassword(
    prevState: any,
    formData: FormData,
): Promise<ApiReturn> {
    const validationFields = schema.safeParse({
        password: formData.get("password"),
    });

    if (!validationFields.success) {
        return {
            error: validationFields.error.errors[0].message,
            code: HttpStatusCode.BadRequest,
        };
    }

    console.log(validationFields.data);

    const { password } = validationFields.data;
    const supabase = createClient();

    const { error, data } = await supabase.auth.updateUser({
        password,
    });

    console.log(error, data);

    if (error) {
        return {
            error: error.message,
            code: error.status || HttpStatusCode.BadRequest,
        };
    }

    // revalidatePath("/", "layout");
    // redirect("/");

    return {
        message: "Password updated",
        code: HttpStatusCode.Ok,
    };
}

"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { createClient } from "@/utils/supabase/server";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import { z } from "zod";
import { ApiReturn } from "@/utils/types";

const schema = z.object({
    password: z.string({
        invalid_type_error: "Invalid Password",
    }),
});

export async function resetPassword(
    prevState: any,
    formData: FormData,
): Promise<ApiReturn> {
    const validationFields = schema.safeParse({
        password: formData.get("password"),
    });

    if (!validationFields.success) {
        return {
            error: validationFields.error.errors[0].message,
            code: HttpStatusCode.BadRequest,
        };
    }

    console.log(validationFields.data);

    const { password } = validationFields.data;
    const supabase = createClient();

    const { error, data } = await supabase.auth.updateUser({
        password,
    });

    console.log(error, data);

    if (error) {
        return {
            error: error.message,
            code: error.status || HttpStatusCode.BadRequest,
        };
    }

    // revalidatePath("/", "layout");
    // redirect("/");

    return {
        message: "Password updated",
        code: HttpStatusCode.Ok,
    };
}

"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { createClient } from "@/utils/supabase/server";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import { z } from "zod";
import { ApiReturn } from "@/utils/types";

const schema = z.object({
    password: z.string({
        invalid_type_error: "Invalid Password",
    }),
});

export async function resetPassword(
    prevState: any,
    formData: FormData,
): Promise<ApiReturn> {
    const validationFields = schema.safeParse({
        password: formData.get("password"),
    });

    if (!validationFields.success) {
        return {
            error: validationFields.error.errors[0].message,
            code: HttpStatusCode.BadRequest,
        };
    }

    console.log(validationFields.data);

    const { password } = validationFields.data;
    const supabase = createClient();

    const { error, data } = await supabase.auth.updateUser({
        password,
    });

    console.log(error, data);

    if (error) {
        return {
            error: error.message,
            code: error.status || HttpStatusCode.BadRequest,
        };
    }

    // revalidatePath("/", "layout");
    // redirect("/");

    return {
        message: "Password updated",
        code: HttpStatusCode.Ok,
    };
}

S

silentworks•7/19/24, 9:49 PM

And what does your email template look like?

Ssilentworks And what does your email template look like?

T

tazioOP•7/19/24, 9:52 PM

<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p>
    <a
        href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/auth/forgot/update"
        >Reset Password</a
    >
</p>

<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p>
    <a
        href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/auth/forgot/update"
        >Reset Password</a
    >
</p>

<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p>
    <a
        href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/auth/forgot/update"
        >Reset Password</a
    >
</p>

<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p>
    <a
        href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/auth/forgot/update"
        >Reset Password</a
    >
</p>

S

silentworks•7/19/24, 9:53 PM

And what does your

/auth/forgot/update

/auth/forgot/update

page.tsx contain?

T

tazioOP•7/19/24, 9:54 PM

"use client";

import Button from "@/components/atoms/Button";
import Container from "@/components/atoms/Container";
import { resetPassword } from "./actions";
import { useFormState } from "react-dom";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import Input from "@/components/atoms/Input";

export default async function ResetPassword() {
    const [state, formAction, isPending] = useFormState(resetPassword, {
        code: 100,
    });

    // if (state.code === HttpStatusCode.Ok) {
    //     location.href = "/";
    // }

    return (
        <Container>
            <form>
                <h1 className="text-3xl mb-5">Wachtwoord opnieuw instellen</h1>
                <div className="mb-4">
                    <Input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="••••••••"
                        label="Wachtwoord"
                        autoComplete="new-password"
                        required
                    />
                </div>
                <div className="flex gap-4 mb-5">
                    <Button type="submit" formAction={formAction} pending={isPending}>
                        Bevestigen
                    </Button>
                    {state.error && (
                        <p className="text-red-500 text-xs italic">{state.error}</p>
                    )}
                    {state.message && (
                        <p className="text-green-500 text-xs italic">{state.message}</p>
                    )}
                </div>
            </form>
        </Container>
    );
}

"use client";

import Button from "@/components/atoms/Button";
import Container from "@/components/atoms/Container";
import { resetPassword } from "./actions";
import { useFormState } from "react-dom";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import Input from "@/components/atoms/Input";

export default async function ResetPassword() {
    const [state, formAction, isPending] = useFormState(resetPassword, {
        code: 100,
    });

    // if (state.code === HttpStatusCode.Ok) {
    //     location.href = "/";
    // }

    return (
        <Container>
            <form>
                <h1 className="text-3xl mb-5">Wachtwoord opnieuw instellen</h1>
                <div className="mb-4">
                    <Input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="••••••••"
                        label="Wachtwoord"
                        autoComplete="new-password"
                        required
                    />
                </div>
                <div className="flex gap-4 mb-5">
                    <Button type="submit" formAction={formAction} pending={isPending}>
                        Bevestigen
                    </Button>
                    {state.error && (
                        <p className="text-red-500 text-xs italic">{state.error}</p>
                    )}
                    {state.message && (
                        <p className="text-green-500 text-xs italic">{state.message}</p>
                    )}
                </div>
            </form>
        </Container>
    );
}

"use client";

import Button from "@/components/atoms/Button";
import Container from "@/components/atoms/Container";
import { resetPassword } from "./actions";
import { useFormState } from "react-dom";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import Input from "@/components/atoms/Input";

export default async function ResetPassword() {
    const [state, formAction, isPending] = useFormState(resetPassword, {
        code: 100,
    });

    // if (state.code === HttpStatusCode.Ok) {
    //     location.href = "/";
    // }

    return (
        <Container>
            <form>
                <h1 className="text-3xl mb-5">Wachtwoord opnieuw instellen</h1>
                <div className="mb-4">
                    <Input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="••••••••"
                        label="Wachtwoord"
                        autoComplete="new-password"
                        required
                    />
                </div>
                <div className="flex gap-4 mb-5">
                    <Button type="submit" formAction={formAction} pending={isPending}>
                        Bevestigen
                    </Button>
                    {state.error && (
                        <p className="text-red-500 text-xs italic">{state.error}</p>
                    )}
                    {state.message && (
                        <p className="text-green-500 text-xs italic">{state.message}</p>
                    )}
                </div>
            </form>
        </Container>
    );
}

"use client";

import Button from "@/components/atoms/Button";
import Container from "@/components/atoms/Container";
import { resetPassword } from "./actions";
import { useFormState } from "react-dom";
import { HttpStatusCode } from "@/utils/HttpStatusCode";
import Input from "@/components/atoms/Input";

export default async function ResetPassword() {
    const [state, formAction, isPending] = useFormState(resetPassword, {
        code: 100,
    });

    // if (state.code === HttpStatusCode.Ok) {
    //     location.href = "/";
    // }

    return (
        <Container>
            <form>
                <h1 className="text-3xl mb-5">Wachtwoord opnieuw instellen</h1>
                <div className="mb-4">
                    <Input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="••••••••"
                        label="Wachtwoord"
                        autoComplete="new-password"
                        required
                    />
                </div>
                <div className="flex gap-4 mb-5">
                    <Button type="submit" formAction={formAction} pending={isPending}>
                        Bevestigen
                    </Button>
                    {state.error && (
                        <p className="text-red-500 text-xs italic">{state.error}</p>
                    )}
                    {state.message && (
                        <p className="text-green-500 text-xs italic">{state.message}</p>
                    )}
                </div>
            </form>
        </Container>
    );
}

T

tazioOP•7/19/24, 9:54 PM

nothing special

S

silentworks•7/19/24, 9:55 PM

Ok stop your dev server, delete

.next

.next

and

node_modules

node_modules

directory and then run

npm install

npm install

again. Make sure you have

0.4.1

0.4.1

in your

package.json

package.json

for the

@supabase/ssr

@supabase/ssr

package.

Ssilentworks Ok stop your dev server, delete `.next` and `node_modules` directory and then ru...

T

tazioOP•7/19/24, 9:58 PM

done but still the same error:

 GET /auth/forgot/update 200 in 525ms
{ password: '123456' }
AuthSessionMissingError: Auth session missing!
    at eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:913:27)
    at SupabaseAuthClient._useSession (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:782:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SupabaseAuthClient._updateUser (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:907:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:902:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:727:28) {
  __isAuthError: true,
  status: 400,
  code: undefined
} { user: null }
 POST /auth/forgot/update 200 in 74ms

 GET /auth/forgot/update 200 in 525ms
{ password: '123456' }
AuthSessionMissingError: Auth session missing!
    at eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:913:27)
    at SupabaseAuthClient._useSession (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:782:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SupabaseAuthClient._updateUser (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:907:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:902:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:727:28) {
  __isAuthError: true,
  status: 400,
  code: undefined
} { user: null }
 POST /auth/forgot/update 200 in 74ms

 GET /auth/forgot/update 200 in 525ms
{ password: '123456' }
AuthSessionMissingError: Auth session missing!
    at eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:913:27)
    at SupabaseAuthClient._useSession (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:782:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SupabaseAuthClient._updateUser (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:907:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:902:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:727:28) {
  __isAuthError: true,
  status: 400,
  code: undefined
} { user: null }
 POST /auth/forgot/update 200 in 74ms

 GET /auth/forgot/update 200 in 525ms
{ password: '123456' }
AuthSessionMissingError: Auth session missing!
    at eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:913:27)
    at SupabaseAuthClient._useSession (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:782:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SupabaseAuthClient._updateUser (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:907:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:902:20)
    at async eval (webpack-internal:///(action-browser)/./node_modules/@supabase/auth-js/dist/module/GoTrueClient.js:727:28) {
  __isAuthError: true,
  status: 400,
  code: undefined
} { user: null }
 POST /auth/forgot/update 200 in 74ms

S

silentworks•7/19/24, 9:59 PM

Create a minimal reproducible repo that shows this issue and I'll have a look at it.

T

tazioOP•7/19/24, 10:01 PM

could i invite you to a live share session?, i could share my local port and have you try?

T

tazioOP•7/19/24, 10:02 PM

or would you perfer a repo?

Ttazio or would you perfer a repo?

S

silentworks•7/19/24, 10:02 PM

This would be better

S

silentworks•7/19/24, 10:02 PM

If its private you can invite me on this same username on GitHub.

T

tazioOP•7/19/24, 10:03 PM

i'll add you to the repo

T

tazioOP•7/19/24, 10:03 PM

invite sent

T

tazioOP•7/19/24, 10:04 PM

dm me if you have problems setting it up

Ssilentworks This would be better

T

tazioOP•7/19/24, 10:07 PM

branch

fix/reset-password

fix/reset-password

is the branch your looking for fyi

Ttazio branch `fix/reset-password` is the branch your looking for fyi

S

silentworks•7/19/24, 10:08 PM

Will take a look now

S

silentworks•7/19/24, 10:15 PM

It worked for me

S

silentworks•7/19/24, 10:16 PM

Let me do a video of me testing it

T

tazioOP•7/19/24, 10:17 PM

https://tenor.com/view/huh-rabbit-cute-gif-15676652

Tenor

S

silentworks•7/19/24, 10:19 PM

I will share the video via DM as I'm not sure if you want any part of your app to be seen by the public as yet

T

tazioOP•7/19/24, 10:19 PM

via DM is fine

S

silentworks•7/19/24, 10:25 PM

Sent a friend request as I can't message you otherwise

S

silentworks•7/19/24, 10:30 PM

Yaaay we got it fixed, it was an issue with local Supabase (CLI) using

127.0.0.1

127.0.0.1

as the site url whilst the app is running on

localhost

localhost

.

J

j4•7/19/24, 11:41 PM

Good to hear!

E

edarioq•9/10/25, 6:56 AM

I am having the same issue, how did you guys get it fixed? This for me is happening in prod, as well as localhost.

Eedarioq I am having the same issue, how did you guys get it fixed? This for me is happen...

J

j4•9/10/25, 9:36 AM

I'd consider making your own post. Show the error, any cookies you have, and if the error is happening client or server side.

E

edarioq•9/10/25, 9:37 AM

Thanks for the reply, I fixed it following the info in this post https://stackoverflow.com/questions/76733274/supabase-reset-password-error-auth-session-missing

Stack Overflow

Supabase reset password error: "Auth Session Missing"

The following function fails with error "Auth Session Missing"
const { error } = await supabase.auth.updateUser({
password: password,
});

After getting the reset password link on my m...

password reset returns Auth session missing

Similar Threads

Similar Threads

Similar Threads