Implement Reset Password with FirebaseAuth and redirect to my own custom page for resetting the password in Flutter

Question

I am working on an application in which I want the user to reset the password using FirebaseAuth but I do not want the user to reset the password on the template provided by the Firebase. Instead I want to send the user in my application to reset the password.

Is there any way of implementing that?

Solution

You can do so by using custom email handlers along with dynamic links to open them in your app. This might require a custom domain to do so. Once the user visits your application on the custom route/page, you can then use applyActionCode method to process the email action. Checkout my answer here for a detailed explanation on processing the email actions:

How to build a custom Email action handler in Flutter for Firebase Authentication

Comments

[Ayesha Iftikhar]

can you please provide an example code like proper functioning code implemented in any application... not just the link to code snippets.

[Dharmaraj]

@AyeshaIftikhar that probably maybe too broad to answer. The documentation includes complete explanation on custom email handlers. The link I've shared includes complete snippet to verify the email links and process the action. Apart from that, you should provide more details about which platform your apps runs on (android/web) and if are stuck at a particular step?

[Ayesha Iftikhar]

my app is currently on web and it does not got stuck but I want that when user ask to reset password, the email of reset password link take the user to custom password reset screen not the default one provided by firebase.

[Dharmaraj]

@AyeshaIftikhar so first you need to add a page for that in your flutter app. Do you have a custom domain for that app ?

[Ayesha Iftikhar]

not yet but we are going to buy a domain for the application soon enough

[Dharmaraj]

@AyeshaIftikhar to implement custom pages you need a custom domain tbh. Read more in the documentation