Forgot password

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

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.

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}');
    }
  }

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());
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

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?

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

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

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

I think you can, yes

Here you can see an example in <:react:637383195503099915> 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

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: "" });

TypeScript

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)
    }
};