Flutter

Forgot password

Dec 27, 2023, 21:27

View on Discord

Votes

Replies

Participants

Unknown

Messages

IchigorOriginal post

Rank 2: Process

Apr 27, 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:

Summary

Developers are seeking assistance with a forgotten password feature. The issue arises with setting up a dynamic link for password resetting and errors related to password complexity. A possible solution involves creating a reset page for updating the password and implementing deep-linking or a standalone mini-site for password resets. Additionally, a Flutter code snippet for sending recovery emails is provided. The user's password recovery process halts after reaching the login page, suggesting a missing step. A Flutter code excerpt for processing password resets is included.

Ichigor

Rank 2: Process

Apr 27, 2023, 13:11

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

Rank 2: Process

Apr 27, 2023, 13:12

@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

Rank 2: Process

Apr 27, 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&secret=21f2d25b72d68cb137efcca2fd0eda815b6a38063bdb15d67ef4993d8c40172cef7c12b8c1feaf019b95f370a775f029d3da3704144f778029302296f98ce576b3cac415845a82e608218ad258e01a6b4a24fc7a74da28adee28638cef979055185e60e632ccdbf326ff5b164ae67d7df18f2dac795a4d016e6627b7f8e2d604&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

Rank 2: Process

Apr 27, 2023, 13:13

Binyamin

Apr 27, 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

Rank 2: Process

Apr 28, 2023, 14:05

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

Ichigor

Rank 2: Process

Apr 28, 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

Apr 28, 2023, 15:04

I think you can, yes

Binyamin

Apr 28, 2023, 15:12

Here you can see an example in
First sending the recovery request
https://github.com/D3nn7/worktime-tracker/blob/b74dd5bf3f91f3ab3f021476ff8910695437b83a/worktime-tracker-dev/pages/account/reset.tsx#L23

And here you can see the how you change the password
https://github.com/D3nn7/worktime-tracker/blob/b74dd5bf3f91f3ab3f021476ff8910695437b83a/worktime-tracker-dev/pages/account/reset.tsx#L33

Om Prakash Jangid

Jun 19, 2024, 05:21

Auth.js---
// updateRecovery
async updatePassword({ userId, secretKey, password, passwordRepeat }) {
try {
console.log("bb", userId, secretKey)
return this.account.updateRecovery(userId, secretKey, { password, passwordRepeat })
} catch (error) {
console.log("Appwrite service :: updateRecovery :: error ", error.message);
throw error
}
}

updateRecovery.jsx-

const UpdateRecovery = () => {
const [formData, setFormData] = useState({ password1: "", password2: "" });

const [searchParams] = useSearchParams(); 
const userId = searchParams.get("userId");
const secret = searchParams.get("secret");

const formFields = [
    { name: "password", type: "password", label: "Password1", required: true },
    { name: "passwordRepeat", type: "password", label: "Password2", required: true },

];

function handleChange(e) {
    const { name, value } = e.target;
    setFormData({
        ...formData,
        [name]: value,
    });
}

const handleUpdatePassword = async (event) => {
    try {
        event.preventDefault();
        const updated = await authService.updatePassword({  userId:userId, secretKey:secret, ...formData });
        console.log("updatedPassword", updated)
        if (updated)
            setError("Password has been updated"); navigate('/login')
    } catch (error) {
        setError(error.message)
        console.log("updatePasswordError:", error.message)
    }
};

Error 00
Invalid password param: Password must be between 8 and 265 characters long, and should not be one of the commonly used password.

i tried to use comples password not not work

FrasK

Oct 25, 2024, 16:03

Everyone has an example of how to do the dynamic link way ?

FrasK

Oct 25, 2024, 16:04

i couldn't find nothing about this way

Join the discussion

Reply to this thread by joining our Discord.

Reply on Discord

Need support?_

Join Discord Get premium support