Skip to main content

Authentication

In the previous chapter, we learned how to register your app to bus.

In this chapter, we will learn how to authenticate users with the help of bus 🚌.

Let's built a UI​

First, we need to build a UI for our app. We will use Tailwind CSS for styling.

import { Grid, LogoMarkMono } from '@aircall/tractor';

import { LoginForm } from './LoginForm';

export const LoginPage = () => {
  const handleSubmit = formValues => {
    alert(JSON.stringify(formValues));
  };

  return (
    <Grid p={4} rowGap={5} gridTemplateColumns={1}>
      <LogoMarkMono />
      <LoginForm onSubmit={handleSubmit} />
    </Grid>
  );
};
Open on CodeSandbox

Plug the form to bus​

Now, we need to plug the form to bus. We will use the useBus hook to do that.

import * as React from 'react';

import { Grid, LogoMarkMono, useToast } from '@aircall/tractor';

import { BusProvider, useBus } from './BusProvider';
import { useReceiveMessage } from './hooks/useReceiveMessage';
import { LoginForm } from './LoginForm';

export const LoginPage = () => {
  const { postMessage } = useBus();
  const { showToast } = useToast();
  const [submitting, setSubmitting] = React.useState(false);

  useReceiveMessage('AUTH.EMAIL_AND_PASSWORD_FULFILLED', () => {
    showToast({ message: 'User is authenticated!', variant: 'primary' });
    setSubmitting(false);
  });

  useReceiveMessage('AUTH.EMAIL_AND_PASSWORD_REJECTED', () => {
    showToast({ message: 'Credentials are invalid!', variant: 'destructive' });
    setSubmitting(false);
  });

  const handleSubmit = ({ email, password }) => {
    setSubmitting(true);
    postMessage({
      type: 'AUTH.EMAIL_AND_PASSWORD',
      payload: { email, password }
    });
  };

  return (
    <Grid p={4} rowGap={5} gridTemplateColumns={1}>
      <LogoMarkMono />
      <LoginForm onSubmit={handleSubmit} submitting={submitting} />
    </Grid>
  );
};
Open on CodeSandbox