quave:accounts-passwordless-react

quave:accounts-passwordless-react is a Meteor package that provides a plug-and-play Passwordless authentication system.

Why

It is designed to simplify the process of adding a password less authentication to Meteor apps.

We are using the accounts-passwordless package from Meteor.

We believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).

Installation

meteor add quave:accounts-passwordless-react

Usage

You need to add the Passwordless component to the route where you want to expose the form to login with the token.

The only required property is onEnterToken as you need to send the user to a different location or update the UI after the authentication is done.

1import React from 'react';
2import { useHistory } from 'react-router-dom';
3import { Passwordless } from 'meteor/quave:accounts-passwordless-react';
4
5export const Access = () => {
6  const history = useHistory();
7
8  const onEnterToken = () => {
9    history.push('/');
10    openAlert('Welcome!');
11  };
12  
13  return (
14    <Passwordless
15      onEnterToken={onEnterToken}
16    />
17  );
18};

Additional options

You can customize all the texts, for example, if you have a system with multiple languages you could have a getText function as a helper to get the proper text based on the language.

1import React from 'react';
2import { useHistory } from 'react-router-dom';
3import { Passwordless } from 'meteor/quave:accounts-passwordless-react';
4import { getText } from '../../infra/texts';
5
6export const Access = () => {
7  const history = useHistory();
8
9  const onEnterToken = () => {
10    history.push(RoutePaths.HOME);
11    openAlert('Welcome!');
12  };
13  
14  return (
15    <Passwordless
16      onEnterToken={onEnterToken}
17      extra={{ language }}
18      emailLabel={getText('emailLabel')}
19      tokenLabel={getText('tokenLabel')}
20      emailLinkLabel={getText('emailLinkLabel')}
21      tokenLinkLabel={getText('tokenLinkLabel')}
22      requestButtonLabel={getText('requestButtonLabel')}
23      enterButtonLabel={getText('enterButtonLabel')}
24      emailValidationErrorMessage={getText('emailValidationErrorMessage')}
25      tokenValidationErrorMessage={getText('tokenValidationErrorMessage')}
26      getSuccessRequestTokenMessage={({ isNewUser }) =>
27        getText('successRequestTokenMessage', { isNewUser })
28      }
29    />
30  );
31};

We do support even more options, you can see all of them in the code.

By default TailwindCSS classes are added for you but you can override them. You can set up TailwindCSS as in this example.

UI props

1  inputProps = {},
2  emailInputProps = {},
3  tokenInputProps = {},
4  labelProps = {},
5  linkProps = {},
6  buttonProps = {},
7  containerClassName = 'mt-8 sm:mx-auto sm:w-full sm:max-w-md',
8  wrapperClassName = 'bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10',
9  formClassName = 'space-y-6',

Event Handlers props

1  onRequestToken = noop,
2  onRequestError = defaultErrorHandler,
3  onInvalidEmail = noop,
4  onEnterToken = noop,
5  onEnterError = defaultErrorHandler,
6  onInvalidToken = noop,

Accounts data props

1  userData = {}, // will be merged with the user data when a new user is created
2  extra, // will be send in the Accounts.requestLoginTokenForUser call as option

Components props

1  ErrorComponent = Error,
2  SuccessComponent = Success,

If you don't want to use this UI to display messages you can provide null for both.

License

MIT