Reset password deeplink not working consistently #33633

rochajulian · 2025-02-15T20:47:00Z

rochajulian
Feb 15, 2025

Hi guys,

I am on Expo and I am trying to implement reset password functionality to my app.

The flow goes as follows:
User requests password reset link
User gets email and clicks on the link
Link has a deeplink redirect to my app's reset password screen
If link is valid, user gets authenticated using the access and refresh token given by the url. Then they are able to update their password and get redirected to the app's "home" screen after doing so
If link is invalid, a toast message is shown to the user and they are immediately redirected back to the forgot password screen

My problem is as follows:
For whatever reason, when a user clicks the link in the email, my code work every other time... I have console logs set up and on the times that my code doesn't work as expected, I see that url is null which doesn't make sense because I do get taken to the reset password screen. I've tried to catch a pattern, I notice that the first time I click the link, I get deeplinked to my app as expected but the url console logs as null so my code doesn't work as expected. However, if I go back to the email and click the link again, I now see the url not be null BUT the link is now expired/invalid and that's not helpful.

What I'm expecting:
I want the deeplink to work everytime and not console log as null every other time...
I will provide my code in the following message.

AuthContext.tsx

  const updateUser = async (updatedData: UserAttributes) => {
    const { error } = await supabase.auth.updateUser(updatedData);

    if (error) {
      throw error;
    }
  };

  const establishSession = async (
    accessToken: string,
    refreshToken: string
  ) => {
    const { error } = await supabase.auth.setSession({
      access_token: accessToken,
      refresh_token: refreshToken
    });

    if (error) {
      throw error;
    }
  };

ResetPassword.tsx

import { useEffect, useState } from "react";
import { View, StyleSheet, TextInput, Button, Text } from "react-native";
import { Link, router } from "expo-router";
import * as Linking from "expo-linking";
import * as QueryParams from "expo-auth-session/build/QueryParams";
import { toast } from "sonner-native";
import { useMutation } from "@tanstack/react-query";
import useAuth from "@/hooks/useAuth";

export default function ResetPassword() {
  const { establishSession, updateUser } = useAuth();

  const createSessionFromUrlMutation = useMutation({
    mutationFn: async (url: string) => {
      const { params } = QueryParams.getQueryParams(url);
      const { error, error_code } = params;
      if (error) {
        if (error_code === "otp_expired") {
          toast.error("OTP expired. Please request a new link.");
        } else {
          toast.error("Something went wrong. Please request a new link.");
        }
        router.replace("/forgot-password");
        return;
      }
      const { access_token, refresh_token } = params;
      if (!access_token || !refresh_token) return;
      await establishSession(access_token, refresh_token);
      console.log("Session established");
    }
  });

  const url = Linking.useURL();

  useEffect(() => {
    console.log("url:", url);
    if (url) createSessionFromUrlMutation.mutate(url);
  }, [url]);

  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const resetPasswordMutation = useMutation({
    mutationFn: async () => {
      await updateUser({ password: password });
    },
    onSuccess: () => {
      toast.success("Password updated successfully.");
      router.replace("/");
    }
  });

return (
    <View style={styles.container}>
      <TextInput
        placeholder="New password"
        value={password}
        
        autoCapitalize="none"
        secureTextEntry
        style={styles.input}
      />
      <TextInput
        placeholder="Confirm password"
        value={confirmPassword}
        
        autoCapitalize="none"
        secureTextEntry
        style={styles.input}
      />
      {resetPasswordMutation.isError && (
        <Text style={styles.errorMessage}>
          {resetPasswordMutation.error.message}
        </Text>
      )}
      <Button
        title="Continue"
         => resetPasswordMutation.mutate()}
        disabled={resetPasswordMutation.isPending}
      />
      <Link href="/login">Cancel</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  input: {
    width: "80%",
    height: 40,
    borderWidth: 1,
    borderColor: "gray"
  },
  errorMessage: {
    marginTop: 10,
    color: "red",
    textAlign: "center"
  }
});

agusstingalvan · 2025-02-26T18:59:55Z

agusstingalvan
Feb 26, 2025

@rochajulian Same issue.
Find out that if you press on recover password it will send you the email.
Next step, close the application. Go to an email, press the link. Note that the password recovery works.

6 replies

Angeloyo Mar 23, 2025

I'm having this issue. Any solution?

OrDavidA Mar 24, 2025

Suffering from the same issue here. So frusturating!

rochajulian Mar 25, 2025
Author

Unfortunately, I still have no solution to this. So in my app I took away email signups and just stuck with social logins... sucks that there isn't much talk about this issue. It seems like everyone should be running into this at some point

jansencodez Mar 25, 2025

I managed to get the URL and session set, but, when user enters the new pass, I have "processing" state which does not die down, until I close the app. On restarting the app I am able to access the session, though the password never resets. This really halts much.

OrDavidA Mar 25, 2025

Before continue, just to note that I am a vibe coder. It means my whole suggested solution is based on AI but I will try to explain as far as I understood (it might be I am talking nonsense but hey, it solved me the same problem).

As you can see in the comments I had the same problem. I know some code but I mainly vibe code. I tried to reset my password about 50 times before solving this problem.. it was horrible. But then I tried to prompt something else with the AI and suddenly something happened. Because the link that was sent to my mail and redirected to the app had a specific structure:
https://your-project-id.supabase.co/auth/v1/verify?token=example-token-value&type=recovery&redirect_to=yourapp://reset-password
I think my app was trying to extract the token, and use it to reset the password. But, as far as I understand, the token is for Supabase server, what we need is the access token, like in here:
yourapp://reset-password#access_token=eyJhbG...TRUNCATED&refresh_token=TRUNCATED

My AI tool suggested the following instructions which finally made me recieve and use the access token and use it to reset the password (I think that after implementing this plan, I had only to ask him to extract better the access token + example of the access token recieved and it worked perfect).

Solution Plan for Your React Native App

Step 1: Parse and Extract the Token from the Deep Link

Why: Your app receives a deep link with a token in the URL, but your current code isn't properly extracting and using this token. The token is sent to your app via the redirect URL but isn't being processed.

// In the reset-password.tsx file, we need to extract and use the token parameter from the URL
const { token } = useLocalSearchParams<{ token: string }>();
// Currently this token isn't being used in the updatePassword function

Step 2: Implement a Session Initialization Function

Why: Based on the thread, the most successful approach was to set the session explicitly using the tokens from the URL, rather than relying on automatic session management.

// Create a function to handle the reset token and establish a session
const initializeResetSession = async (resetToken: string) => {
  try {
    // First, verify the OTP (one-time password) token
    const { error } = await supabase.auth.verifyOtp({
      type: 'recovery',
      token: resetToken,
    });
    
    if (error) throw error;
    return true;
  } catch (err) {
    console.error('Error initializing reset session:', err);
    return false;
  }
};

Step 3: Modify Your Password Reset Flow

Why: Your current implementation calls updatePassword() directly without verifying the token first, which is likely the source of the error.

const handleResetPassword = async () => {
  // Reset error state
  setError(null);
  
  // Validate input
  if (!password || !confirmPassword) {
    setError('Please enter and confirm your new password');
    return;
  }
  
  // ... other validations ...
  
  if (!token) {
    setError('Invalid or missing reset token');
    return;
  }
  
  try {
    setIsLoading(true);
    
    // Initialize the reset session with the token first
    const sessionValid = await initializeResetSession(token);
    
    if (!sessionValid) {
      throw new Error('Could not verify reset token');
    }
    
    // Now update the password
    const { error: resetError } = await updatePassword(password);
    
    if (resetError) {
      throw resetError;
    }
    
    // Show success state
    setIsSuccess(true);
  } catch (err) {
    // ... error handling ...
  }
};

Step 4: Add Deep Link Listener in Your App's Entry Point

Why: You need to handle deep links more globally to properly process auth redirects, as shown in the Expo solution in the thread.

// Add this to your App.tsx or index file
import * as Linking from 'expo-linking';

// ... in your initialization code ...
Linking.addEventListener('url', async (event) => {
  // Parse the URL to handle auth redirects
  const url = event.url;
  
  // Detect if this is a password reset link
  if (url.includes('type=recovery')) {
    const parsedURL = Linking.parse(url);
    // Extract the token, might need additional parsing based on your URL structure
    const token = parsedURL.queryParams?.token;
    
    if (token) {
      // Navigate to reset password screen with the token
      // This depends on your navigation setup
      router.replace({
        pathname: '/(auth)/reset-password',
        params: { token }
      });
    }
  }
});

Step 5: Update the Reset Password Screen to Handle URL Parameters

Why: Make sure the screen is ready to receive the token from the deep link.

// Make sure your reset-password.tsx properly reads the token from params
useEffect(() => {
  // Log token for debugging
  console.log('Reset password token:', token);
  
  // Validate token presence
  if (!token) {
    setError('No reset token provided. Please request a new password reset link.');
  }
}, [token]);

Why This Should Fix Your Issue

The core problem appears to be that your app is not properly handling the token provided in the reset link. Your code is attempting to update the password directly without first verifying the token.
The solution outlined above:

Properly extracts the token from the deep link
Verifies the token with Supabase before attempting to update the password
Establishes a proper auth session for the reset operation
Handles potential edge cases and errors

I hope you will find this info helpful guys!

aydahealth · 2025-04-28T12:44:15Z

aydahealth
Apr 28, 2025

were you able to find a solution @rochajulian?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Supabase

Reset password deeplink not working consistently #33633

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Reset password deeplink not working consistently #33633

Replies: 2 comments · 6 replies

rochajulian Mar 25, 2025 Author

Solution Plan for Your React Native App

Step 1: Parse and Extract the Token from the Deep Link

Step 2: Implement a Session Initialization Function

Step 3: Modify Your Password Reset Flow

Step 4: Add Deep Link Listener in Your App's Entry Point

Step 5: Update the Reset Password Screen to Handle URL Parameters

Why This Should Fix Your Issue

Replies: 2 comments 6 replies

rochajulian Mar 25, 2025
Author