UpdatePasswordForm.jsx

import { map, redirect, route } from 'navi'

function UpdatePasswordForm({ submitErrors }) {
  return (
    <Form
      method='post'
      submitErrors={submitErrors} 
      validate={value =>
        value.password !== value.passwordConfirmation &&
        {
          passwordConfirmation: 'This should match your password',
        }
      }
    >
      <h1>Need a new Password?</h1>
      <Form.Errors />
      <Form.Field
        label='New password'
        name='password'
        type='password'
        required
      />
      <Form.Field
        label='And again'
        name='passwordConfirmation'
        type='password'
      />
      <Form.SubmitButton>
        Request a new password
      </Form.SubmitButton>
    </Form>
  )
}

let route = map(async ({ body, context, method, mountpath }) => {
  if (!context.currentUser) {
    return redirect('/login?redirectTo='+encodeURIComponent(mountpath))
  }

  if (method === 'post') {
    try {
      await context.firebase.auth.currentUser.updatePassword(body.password);
      return redirect('/')
    }
    catch (error) {
      return route({
        view: <UpdatePasswordForm submitErrors={error.message} />
      })
    }
  }

  return route({
    view: <UpdatePasswordForm />
  })
})