Log In

To log in an existing user account, the accounts.login() method can be called from your component:

import joystick, { accounts } from '@joystick.js/ui';

const Login = joystick.component({
  events: {
    'submit form': (event = {}) => {
      accounts.login({
        email_address: event.target.email_address.value,
        password: event.target.password.value,
      }).then(() => {
        location.pathname = '/dashboard';
      });
    },
  },
  render: () => {
    return `
      <div class="login">
        <form>
          <label>Email Address</label>
          <input type="email" name="email_address" placeholder="Email Address" />
          <label>Password</label>
          <input type="password" name="password" placeholder="Password" />
          <button type="submit">Log In</button>
        </form>
      </div>
    `;
  },
});

export default Login;

Above, we listen for a submit event on our <form></form> element, calling to accounts.login() to login an existing user. Because we expect accounts.login() to return a Promise, we use a .then() callback if the request is successful, redirecting to a hypothetical route that requires a logged in user.

API Reference

accounts.login()

Function API

accounts.login(options: object) => Promise;

Arguments