Reset password deeplink not working consistently

[rochajulian]

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}
        onChangeText={setPassword}
        autoCapitalize="none"
        secureTextEntry
        style={styles.input}
      />
      <TextInput
        placeholder="Confirm password"
        value={confirmPassword}
        onChangeText={setConfirmPassword}
        autoCapitalize="none"
        secureTextEntry
        style={styles.input}
      />
      {resetPasswordMutation.isError && (
        <Text style={styles.errorMessage}>
          {resetPasswordMutation.error.message}
        </Text>
      )}
      <Button
        title="Continue"
        onPress={() => 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]

@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.