@config.one/auth

Contents

• Installation
• Get started
• Configuration
• Helpers
• Components
  • AuthProvider
  • Registration
  • Login
  • PhoneVerification
  • ResetPassword & ResetConfirmation
  • AuthChecker

Install

npm i @config.one/auth

Get started

import React, { Component } from 'react';
import { AuthProvider, Registration } from '@config.one/auth';

const config = {
  paths: {
    base:     'http://127.0.0.1:8000',
    register: '/api/public/v1/user/register',
  },
  dev: true,
};

class Example extends Component {
  onSuccess = (values, response) => {
    console.log('Registration successful', values);
  };
  
  onFailure = response => {
    console.log('Registration failed!', response);
  };
  
  onLoginClick = () => {
    console.log('Login button clicked!');  
  };

  render () {
    return (
      <AuthProvider config={config}>
        <Registration 
          onSuccess={this.onSuccess}
          onFailure={this.onFailure}
          onLoginClick={this.onLoginClick}
        />
      </AuthProvider>
    )
  }
}

Configuration

./config.js

export default {
    paths: {
        // Base path will be prepended to each path.
        // If not specified, the current location will be used.
        base:               'http://127.0.0.1:8000/',
        
        // Used by the Registration component.
        domainList:         '/api/public/v1/domain/list',
        register:           '/api/public/v1/user/register',
        
        // Used by the Login component.
        token:              '/api/public/token',
        userProfile:        '/api/secure/v1/user/profile',
        
        // Used by the PasswordReset component.
        emailRequestReset:  '/api/public/v1/user/reset_password/email/start',
        
        // You can specify an absolute path. It will ignore the base path.
        // Used by the PhoneActivation component.
        phoneActivate:      'http://config.one/api/secure/v1/user/phone/activate',
    },
    // If true, some usefull verbose information will be shown in the browser console.
    dev: true,
}

None of the configuration entries are required. The default configuration is:

const config = {
  paths: {
      domainList:         '/api/public/v1/domain/list',
      register:           '/api/public/v1/user/register',
      token:              '/api/public/token',
      emailRequestReset:  '/api/public/v1/user/reset_password/email/start',
      phoneActivate:      '/api/secure/v1/user/phone/activate',
      userProfile:        '/api/secure/v1/user/profile'
  },
  dev: false
}

Helpers

createAxios

@config.one/auth uses axios under the hood to make remote requests. The createAxios helper takes a single argument, which is a user config and returns an instance of axios. It intercepts all requests with the status code 401 (Unauthorized) and tries to refresh the access_token before any .then() and catch(). If there were other parallel requests, they are stalled into a queue until the new access_token is retrieved. You should also pass with instance to the AuthProvider component, so that both your project components and the plugin components could use the same instance of axios.

import { AuthProvider, createAxios } from '@config.one/auth';
import config from './config';

// Create an auth aware axios instance
const axios = createAxios(config);

const App = () => (
    <AuthProvider config={config} tokenAwareAxios={axios}>
        ...
    </AuthProvider>
)

Components

AuthProvider

All components should be wrapped into AuthProvider component to have access to users configuration and to axios instance.

import { AuthProvider, Registration, Login, PasswordReset } from '@config.one/auth';
import config from './config';

// Create an auth aware axios instance
const axios = createAxios(config);

const App = () => (
  <AuthProvider config={config} tokenAwareAxios={axios}>
    <Registration/>
    <Login/>
    <PasswordReset/>      
  </AuthProvider>
);

It's not necessary for the components to be direct children of the AuthProvider. They can be nested at any depth:

import { AuthProvider, Registration, Login, PasswordReset } from '@config.one/auth';
import config from './config';

const App = () => (
  <AuthProvider config={config}>
    <SomeOtherComponent>
      <AnotherOne>
        <Registration/>
        <Login/>
        <PasswordReset/>  
      </AnotherOne>
    </SomeOtherComponent>  
  </AuthProvider>
);

Registration

import { Registration } from '@config.one/auth';

<Registration
  onSuccess={this.onRegistrationSuccess}
  onFailure={this.onRegistrationFailure}
  onLoginClick={this.onLoginClick}
  showLoginButton={true}
  autoLogin={true}
  onLoginSuccess={this.onLoginSuccess}
  onLoginFailure={this.onLoginFailure}
/>

API

| Name | Type | Default | Description | |-----------------|:---------------:|:--------:|:------------| | onSuccess | function | none | Will be called if the response from the server is successfull (code 2xx). The callback gets 2 arguments: values and response. values contains all the data entered into the form, response is a standard Response object. | onFailure | function | none | Will be called if the response from the server is unsuccessfull (codes 4xx and 5xx). The callback gets 1 argument: values which contains all the data entered into the form. | onLoginClick | function | none | Will be fired by click on the "Login" button on the registration form. | showLoginButton | boolean | true | Show/Hide the "Login" button on the registration form. | autoLogin | boolean | true | Defines whether to automatically sign in after a successful user registration. | onLoginSuccess | function | none | Same as onSuccess, but fires after a successful automatic signing. | onLoginFailure | function | none | Same as onFailure, but fires if automatical signing fails.

Login

import { Login } from '@config.one/auth'

<Login
    onSuccess={this.onLoginSuccess}
    onFailure={this.onLoginFailure}
    onRegistrationClick={this.onRegistrationClick}
    showRegistrationButton={true}
    showForgotPassword={true}
/>

API

| Name | Type | Default | Description | |-----------------|:---------------:|:--------:|:------------| | onSuccess | function | none | Will be called if the response from the server is successfull (code 2xx). The callback gets 2 arguments: values and response. values contains all the data entered into the form, response is a standard Response object. | onFailure | function | none | Will be called if the response from the server is unsuccessfull (codes 4xx and 5xx). The callback gets 1 argument: values which contains all the data entered into the form. | onRegistrationClick | function | none | Will be fired by clickin on the "Registration" button on the registration form. | showRegistrationButton | boolean | true | Show/Hide the "Registration" button on the login form. | showForgotPassword | boolean | true | Show/Hide the "Forgot password" link on the login form.

PhoneVerification

<PhoneVerification
    onSuccess={this.onPhoneVerificationSuccess}
    onFailure={this.onPhoneVerificationFailure}
    onResendSuccess={this.onResendSuccess}
    onResendFailure={this.onResendFailure}
    cooldown={0.5}
    digits={4}
/>

API

| Name | Type | Default | Description | |-----------------|:---------------:|:--------:|:------------| | onVerifySuccess | function | none | Fired on pressing the "Verify" button and if the response from the server is successfull (code 2xx). The callback gets 2 arguments: code and response. code is the OTP entered to the form, response is a standard Response object. | onVerifyFailure | function | none | Fired if the response from the server is unsuccessfull (codes 4xx and 5xx). The callback gets 1 argument, which is the OTP entered to the form. | onResendSuccess | function | none | Fired if the response from the server is successfull (code 2xx). The callback gets 1 argument - a standard Response object. | onResendFailure | boolean | true | Fired if the response from the server is unsuccessfull (codes 4xx and 5xx). The callback gets 1 argument - a standard Response object. | cooldown | int | 1 | Timeout in minutes to be able to resend the SMS. Could be less than 1 (e.g. 0.5) | digits | int | 4 | Number of allowed digits in the code field

ResetPassword & ResetConfirmation

These components should be used in couple. ResetPassword is the form to enter the email to send the resetting link for first time. ResetConfirmation is a confirmation message form with a button, to resend the link.

<ResetPassword
    onSuccess={this.onPasswordResetSuccess}
    onFailure={this.onPasswordResetFailure}
    onLoginClick={this.onLoginClick}
/>

<ResetConfirmation
    onLoginClick={this.onLoginClick}
    onLinkResendSuccess={this.onLinkResendSuccess}
    onLinkResendFailure={this.onLinkResendFailure}
    cooldown={1}
/>

API

| Name | Type | Default | Description | |-----------------|:---------------:|:--------:|:------------| | onSuccess | function | none | Fired on pressing the "Verify" button and if the response from the server is successfull (code 2xx). The callback gets 2 arguments: code and response. code is the OTP entered to the form, response is a standard Response object. | onFailure | function | none | Fired if the response from the server is unsuccessfull (codes 4xx and 5xx). The callback gets 1 argument, which is the OTP entered to the form. | onLoginClick | function | none | Will be fired by clickin on the "Login" button on the registration form. | onLinkResendSuccess | function | none | Fired if the response from the server is successfull (code 2xx). The callback gets 1 argument - a standard Response object. | onLinkResendFailure | boolean | true | Fired if the response from the server is unsuccessfull (codes 4xx and 5xx). The callback gets 1 argument - a standard Response object. | cooldown | int | 5 | Timeout in minutes to be able to resend the link. Could be less than 1 (e.g. 0.5)

AuthChecker

This helper component can be used to decide what to render, depending on the authentication data.

import { Login, AuthChecker } from '@config.one/auth';
import Profile from './Profile';
import UserActivation from './UserActivation';

<AuthChecker>
    {(isLoggedIn, user) => {
        if (isLoggedIn) {
            return user.confirmed ? <Profile user={user}/> : <UserActivation/>;
        } else {
            return <Login />
        }
    }}
</AuthChecker>

License

MIT © Config.one GmbH