Skip to content

Question on homework #2

@montythepython

Description

@montythepython

Hello Dipesh, thank you very much for this tutorial. This is not really an issue but a question on the homework you left for it.

I created the link to "Forgot password" in this way:
In Login.js :

  <div className='p-4 box mt-3 text-center'>
    Don't have an account? <Link to='/signup'>Sign up</Link>
    <br />
    <Link to='/passwordreset' >Forgot password?</Link>
  </div>

My new component "PasswordReset.js" is this:

    import React, { useState } from 'react';
    import { useNavigate } from 'react-router-dom';
    import { Form, Alert, Button } from 'react-bootstrap';
    import { useUserAuth } from '../context/UserAuthContext';

    const PasswordReset = () => {
      const [email, setEmail] = useState('');
      const [error, setError] = useState('');
      const { resetPassword } = useUserAuth();
      let navigate = useNavigate();
    
      const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        try {
          await resetPassword(email);
          navigate('/');
        } catch (err) {
          setError(err.message);
        }
      }
    
      return (
        <div className='p-4 box'>
          <h2 className='mb-3'>Reset Password</h2>
          {error && <Alert variant='danger'>{error}</Alert>}
          <Form onSubmit={handleSubmit}>
            <Form.Group className='mb-3' controlId='formBasicEmail'>
              <Form.Control
                type='email'
                placeholder='Email address'
                onChange={(e) => setEmail(e.target.value)}
              />
            </Form.Group>
    
            <div className='d-grid gap-2'>
              <Button variant='primary' type='submit'>Send</Button>
            </div>
          </Form>
        </div>
      )
    }
    
    export default PasswordReset

And the function "resetPassword(email)" in "UserAuthContext.js" (exposed) is this:

  function resetPassword(email) {
    return sendPasswordResetEmail(auth, email).then((a) => {
      alert('Password reset email sent')
    })
  }

Everything works well, except that I dont know how to actually send the email with a reset code or new temp password....

I can send you more info or all the files if needed.

Could you give me some pointers on how to move forward from here?

Again, thank you for your tutorial and your help!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions