genetic-orange•3w ago

Cannot update password using supabase auth

Here is my repo: https://github.com/ThomasBurgess2000/budget I created it using the supabase default project for NextJS. Whenever I tried to reset the password, I get a reset link sent to my email, but whenever I go to that link it just takes me to the login page. I thought it was supposed to log me in and take me to an update password page. So I created a update-password page myself. The reset link still takes me to the login page, but then I manually go to /update-password. But whenever I try to reset the password there I get Auth session missing! What am I doing wrong?

GitHub

GitHub - ThomasBurgess2000/budget: Budget app built with Refine and...

Budget app built with Refine and Supabase. Contribute to ThomasBurgess2000/budget development by creating an account on GitHub.

2 Replies

kapa.ai•3w ago

Hi @ninjinka. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're encountering issues with the password reset flow using Supabase in your Next.js project. Based on the information provided in the knowledge sources, here are some steps and considerations to help you troubleshoot and resolve the issue: 1. Ensure Correct Redirect URL: Make sure that the redirectTo URL in your password reset email is correctly set to your /update-password page. This is crucial for the flow to work as expected.

   const { data, error } = await supabaseClient.auth.resetPasswordForEmail(
     email,
     {
       redirectTo: `${window.location.origin}/update-password`,
     },
   );

   const { data, error } = await supabaseClient.auth.resetPasswordForEmail(
     email,
     {
       redirectTo: `${window.location.origin}/update-password`,
     },
   );

Source: Understanding the Auth Provider Part 2 (https://refine.dev/docs/data/packages/supabase/#understanding-the-auth-provider) 2. Handle the Update Password Logic: When the user navigates to the /update-password page, you need to handle the password update logic. Ensure that your updatePassword function is correctly implemented.

   updatePassword: async ({ password }) => {
     try {
       const { data, error } = await supabaseClient.auth.updateUser({
         password,
       });

       if (error) {
         return {
           success: false,
           error,
         };
       }

       if (data) {
         return {
           success: true,
           redirectTo: "/",
         };
       }
     } catch (error: any) {
       return {
         success: false,
         error,
       };
     }

     return {
       success: false,
       error: {
         message: "Update password failed",
         name: "Invalid password",
       },
     };
   },

   updatePassword: async ({ password }) => {
     try {
       const { data, error } = await supabaseClient.auth.updateUser({
         password,
       });

       if (error) {
         return {
           success: false,
           error,
         };
       }

       if (data) {
         return {
           success: true,
           redirectTo: "/",
         };
       }
     } catch (error: any) {
       return {
         success: false,
         error,
       };
     }

     return {
       success: false,
       error: {
         message: "Update password failed",
         name: "Invalid password",
       },
     };
   },

Source: Understanding the Auth Provider Part 3 (https://refine.dev/docs/data/packages/supabase/#understanding-the-auth-provider) 3. Check for Auth Session: The error Auth session missing! suggests that the session might not be properly set or retrieved. Ensure that the session is correctly managed and available when the user tries to update the password.

   check: async () => {
     try {
       const { data } = await supabaseClient.auth.getSession();
       const { session } = data;

       if (!session) {
         return {
           authenticated: false,
           error: {
             message: "Check failed",
             name: "Session not found",
           },
           logout: true,
           redirectTo: "/login",
         };
       }
     } catch (error: any) {
       return {
         authenticated: false,
         error: error || {
           message: "Check failed",
           name: "Session not found",
         },
         logout: true,
         redirectTo: "/login",
       };
     }

     return {
       authenticated: true,
     };
   },

   check: async () => {
     try {
       const { data } = await supabaseClient.auth.getSession();
       const { session } = data;

       if (!session) {
         return {
           authenticated: false,
           error: {
             message: "Check failed",
             name: "Session not found",
           },
           logout: true,
           redirectTo: "/login",
         };
       }
     } catch (error: any) {
       return {
         authenticated: false,
         error: error || {
           message: "Check failed",
           name: "Session not found",
         },
         logout: true,
         redirectTo: "/login",
       };
     }

     return {
       authenticated: true,
     };
   },

Source: Understanding the Auth Provider Part 3 (https://refine.dev/docs/data/packages/supabase/#understanding-the-auth-provider) 4. Ensure Proper Routing: Make sure your routing is correctly set up to handle the /update-password path. Here is an example of how you can set up the routes in your App.tsx: ```typescript import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; import { Refine, Authenticated } from "@refinedev/core"; import { AuthPage, RefineThemes, ThemedLayoutV2 } from "@refinedev/antd"; import routerProvider, { NavigateToResource, CatchAllNavigate } from "@refinedev/react-router-v6"; import { ConfigProvider } from "antd"; import authProvider from ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@284663162815643649> kapa.ai is still learning and improving, please let us know how it did by reacting below