@config.one/auth v1.2.15

@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

Login

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

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

API

PhoneVerification

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

API

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

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