Log in after registration

Now try registering a new user. If you notice, after you register you don’t immediately see that the user is now logged in. We need to populate the session client-side, when we know that the user is logged in.

In components/RegistrationModal.js, let’s add

import { useStoreActions } from 'easy-peasy'

on top, and inside the component body:

const setUser = useStoreActions(actions => actions.user.setUser)

Great! Now we can call:

setUser(email)

after we know the registration was successful:

<form
  onSubmit={async event => {
    try {
      const response = await axios.post('/api/auth/register', {
        email,
        password,
        passwordconfirmation
      })
      if (response.data.status === 'error') {
        alert(response.data.message)
        return
      }
      setUser(email)
    } catch (error) {
      alert(error.response.data.message)
      return
    }
    event.preventDefault()
  }}>
  ...

Let’s also close the modal when we register, because it’s not a great UX if we keep it open after a successful registration.

We import the setHideModal action from the store:

const setHideModal = useStoreActions(actions => actions.modals.setHideModal)

and we call it after the setUser(email) line:

setUser(email)
setHideModal()

Try the application: you should be able to create a new user using the registration form, the UI should change to show that you are logged in, and then you should be able to log out.

---

Go to the next lesson