I'm creating a flutter mobile app app with Supabase as backend. I'm struggling with code responsible for resetting password. When user opens deep link generated by supabase, go_router can't display appropriate route because there is a fragment added to deep link.
In supabase_flutter package function resetPasswordForEmail accepts [redirectTo] parameter. I pass to it a path of route. But app opens that path with fragment(#) added with information about authentication session.
Here is a simplified example, where I simply go to route with fragment(#) instead of deep link:
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() => runApp(MyApp());
GoRouter router = GoRouter(routes: [
GoRoute(
path: '/',
builder: (context, _) => const PasswordResetLinkPage(title: 'Password Reset Link')),
GoRoute(path: '/passwordReset', builder: (context, _) => const PasswordResetFormPage())
]);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
routerConfig: router,
);
}
}
class PasswordResetLinkPage extends StatefulWidget {
final String title;
const PasswordResetLinkPage({
super.key,
required this.title,
}) : super();
@override
State<PasswordResetLinkPage> createState() => _PasswordResetLinkPageState();
}
class _PasswordResetLinkPageState extends State<PasswordResetLinkPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: TextButton(
child: const Text('Reset your password'),onPressed: () => context.go('/passwordReset/#access_token=qwerty')
),
));
}
}
class PasswordResetFormPage extends StatelessWidget{
const PasswordResetFormPage({super.key}) : super();
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: const Text('Provide new password')),
body: const Column(children: [TextField(), TextField()])
);
}
}
I've tried to check if path has a fragment, and if yes, go to password reset form inside top level redirection, but redirection is done before deep link is processed.
GoRouter(
routes: ...,
redirect: (context, state){
if(state.uri.fragment.isNotEmpty) return '/passwordReset';
}
);
Go_router's logs are something like this:
[GoRouter] going to /passwordReset
[GoRouter] No initial matches : /passwordReset/#access_token=qwerty
My question is there any way to reflect fragments inside route's path, and how to make it work?