Redirect user back to flutter app for supabase password reset

I'm fairly new to supabase, flutter, and programming in general. I'm trying to achieve the following:

When the user taps the "Reset Email" link in the password reset email, they are redirected back to my Flutter app, but not to the SetNewPasswordScreen. How can I make sure that the user is redirected to the SetNewPasswordScreen specifically?

In summary, this is the user flow I am trying to achieve:

1. User submits their email address on ForgotPasswordScreen
2. User recieves email
3. User taps "Reset Email" link in email
4. User is redirected to SetNewPasswordScreen

The following call triggers the password reset email to be sent to the user:

      final response = await supaClient.auth.resetPasswordForEmail(email,
          redirectTo: kIsWeb
              ? null
              : 'io.supabase.pickleballislife://forgotpassword-callback/');

In my ios/Runner/Info.plist file, I've inserted the following block:

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>'io.supabase.pickleballislife://forgotpassword-callback/'</string>
		</array>
		</dict>
	</array>

And in my android/app/src/main/AndroidManifest.xml file, I've inserted the following block:

<intent-filter>
				<action android:name="android.intent.action.VIEW" />
				<category android:name="android.intent.category.DEFAULT" />
				<category android:name="android.intent.category.BROWSABLE" />
				<!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
				<data
				android:scheme="io.supabase.pickleballislife"
				android:host="forgotpassword-callback" />
			</intent-filter>

The route for the SetNewPasswordScreen is:

  static const ROUTE_NAME = '/forgotpassword-callback';

and I've defined it in my routes the following way:

SetNewPasswordScreen.ROUTE_NAME: (BuildContext context) {
    return SetNewPasswordScreen();
  },

And on my ForgotPasswordScreen, I've set up the following AuthChangeEvent listener:

  @override
  void initState() {
    super.initState();
    final _authSubscription = supaClient.auth.onAuthStateChange.listen((data) {
      final AuthChangeEvent event = data.event;
      if (event == AuthChangeEvent.passwordRecovery) {
        goToNamed(
          SetNewPasswordScreen.ROUTE_NAME,
          replace: true,
        );
      }
    });
    _authSubscription.cancel();
  }

How can I ensure that once the user taps the "Reset Password" link in their email, they are redirected to the SetNewPassword screen and not just my mobile app in general?

Your plist file should contain only io.supabase.pickleballislife, because that is your scheme

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
    <array>
        <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>io.supabase.pickleballislife</string>
        </array>
        </dict>
    </array>

Then instead of going to io.supabase.pickleballislife://forgotpassword-callback/, you can go to io.supabase.pickleballislife://callback/forgotpassword. The key is that we are now redirecting to the /forgotpassword path. BTW, there is nothing wrong with having forgotpassword-callback as the host, but it might be confusing, so I have changed it to callback. You may want to update the setting on Android as well.

Now you can setup your routes using GoRouter,

GoRouter(
  routes: [
    ...
    GoRoute(
      path: '/forgotpassword',
      builder: (context, state) => SetNewPasswordScreen(),
    ),
  ],
);

You also need to setup some additional configuration on both iOS and Android side to enable Flutter deep linking. You can find the instruction here.

With this, you should be able to call the following and the user will be redirected to the password reset page! Also remember to update the URL configuration on your Supabase dashboard to accept io.supabase.pickleballislife://callback/forgotpassword/ as additional URL.

final response = await supaClient.auth.resetPasswordForEmail(email,
          redirectTo: kIsWeb
              ? null
              : 'io.supabase.pickleballislife://callback/forgotpassword/');