Back

Forgot password

  • 0
  • Flutter
Ichigor
27 Apr, 2023, 13:09

Hi!

I have a project in Flutter and Appwrite.

I only have the ip-address as a URL I created a password recovery page and this is what my page code looks like:

TL;DR
The user is having trouble with the password recovery process in their Flutter and Appwrite project. They have created a password reset page and shared the code for it. They are able to send a password recovery email to the user, but when the user clicks on the link in the email, they are redirected to the common Appwrite admin login page and are unable to reset their password. To resolve this issue, the user needs to create a separate reset page that includes a form for the user to enter their new password. The reset URL in the recovery email should point to this reset page. The user should then submit the form with the provided reset
Ichigor
27 Apr, 2023, 13:11
TypeScript
class PasswordResetScreen extends StatelessWidget {
  const PasswordResetScreen({Key? key}) : super(key: key);

  Future<void> resetPassword(BuildContext context, String email) async {
    try {
      final account = Account(client);
      await account.createRecovery(email: email, url: 'http://192.168.1.1');
      showDialog(
        context: context,
        builder: (_) => AlertDialog(
          title: Text('Email sent'),
          content: Text(
              'An email with password recovery instructions was sent to $email.'),
          actions: [
            TextButton(
              child: Text('OK'),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ],
        ),
      );
    } on AppwriteException catch (e) {
      showDialog(
        context: context,
        builder: (_) => AlertDialog(
          title: Text('Error'),
          content:
              Text('Failed to send password recovery request.'),
          actions: [
            TextButton(
              child: Text('OK'),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ],
        ),
      );
      print('Error: ${e.message}');
    }
  }
Ichigor
27 Apr, 2023, 13:12
TypeScript
@override
  Widget build(BuildContext context) {
    final TextEditingController _emailController = TextEditingController();
    return Scaffold(
      appBar: AppBar(
        title: Text('Restore password'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              controller: _emailController,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                labelText: 'Email',
                hintText: 'Enter your email address',
                border: OutlineInputBorder(),
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter your email address';
                }
                if (!RegExp(r'\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b')
                    .hasMatch(value)) {
                  return 'Please enter a valid email address';
                }
                return null;
              },
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              child: Text('Send'),
              onPressed: () {
                if (_emailController.text.isNotEmpty) {
                  resetPassword(context, _emailController.text.trim());
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}
Ichigor
27 Apr, 2023, 13:12

Then the user requests password recovery through this form and successfully receives an email with the following content:

Hello

Follow this link to reset your notekeep password.

http://192.168.1.1/?userId=642a0de3d38b48156571&amp;secret=21f2d25b72d68cb137efcca2fd0eda815b6a38063bdb15d67ef4993d8c40172cef7c12b8c1feaf019b95f370a775f029d3da3704144f778029302296f98ce576b3cac415845a82e608218ad258e01a6b4a24fc7a74da28adee28638cef979055185e60e632ccdbf326ff5b164ae67d7df18f2dac795a4d016e6627b7f8e2d604&amp;expire=2023-04-27+13%3A17%3A15.215

If you didn’t ask to reset your password, you can ignore this message.

Thanks notekeep team


Next, the user clicks the link and is redirected to the common Appwrite admin login page:

http://192.168.1.1/login

nothing else happens. The user can't retrieve his password any further.

What else do I need to do to restore the user's password?

Ichigor
27 Apr, 2023, 13:13
Binyamin
27 Apr, 2023, 14:56

The whole process of resetting a user password is semi-automatic way. You'll first need to create a reset link and to the createRecovery function you need to provide URL.

But, the URL shouldn't be the address of your server. This URL should a link to a reset page, And within this reset page you'll need to create a form that let the user to enter new password. Then you'll need to submit that form with the function updateRecovery providing the reset token, user ID and password.

Because you're using flutter you have two options

A. Deep-linking / Dynamic links and set the reset URL as something that could be recognized by your app.

B. The easy and more common one is to create mini-site just to for resetting the password.

I've Attached a diagram

Ichigor
28 Apr, 2023, 14:05

Does anyone have a sample code page for password recovery, for example in php or any other language?

Ichigor
28 Apr, 2023, 14:06

Can I create such a page with the password update form in Flutter for WEB and then just upload it to the hosting?

Binyamin
28 Apr, 2023, 15:04

I think you can, yes

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more