@8base/auth

8base Auth

The 8base Auth package contains provider with authentication state and auth helpers.

AuthProvider

Table of Contents

• AuthProvider
• AuthContextProps
  • Properties
• withAuth
  • Parameters

AuthProvider

Extends Component

Provides access to the authentication state.

AuthContextProps

Authentication context

Properties

• isAuthorized boolean?
• authState AuthState?
• setAuthState function (AuthState): void?

withAuth

Hoc to pass auth state to the component

Parameters

• WrappedComponent React$ComponentType<any>
• auth AuthContextProps Auth state passed by the props.

Returns React$ComponentType<InputProps>

Usage

Simple Usage

import { AuthProvider, AuthConsumer } from '@8base/auth';

  <AuthProvider>
    ...
      <AuthConsumer>
        {
          (auth: AuthContextProps) => (<div />)
        }
      </AuthConsumer>
    ...  
  </AuthProvider>

Usage with @8base/apollo-client

import React, { Component } from 'react';
import { withAuth } from '@8base/auth-provider';
import { EightBaseApolloClient } from '@8base/apollo-client';
import { ApolloProvider } from 'react-apollo';

class Foo extends Component {
  constructor(props) {
    super(props);

    this.client = createApolloClient({
      getAuthState: this.getAuthState,
      getRefreshTokenParameters: this.getRefreshTokenParameters,
      onAuthSuccess: this.onAuthSuccess,
      onAuthError: this.onAuthError,
      uri: process.env.REACT_APP_SERVER_URL
    });
  }

  getRefreshTokenParameters = () => {
    const { auth: { authState: { email, refreshToken }}} = this.props;

    return { email, refreshToken };
  };

  onAuthSuccess = ({ refreshToken, idToken }) => {
    const { auth: { setAuthState }} = this.props;

    setAuthState({
      idToken,
      refreshToken,
    });
  };

  onAuthError = (err) => {
    const { auth: { setAuthState }} = this.props;

    setAuthState({
      idToken: '',
      refreshToken: '',
    });
  };

  getAuthState = () => {
    const { auth: { authState: { idToken, workspaceId }}} = this.props;

    return {
      idToken,
      workspaceId,
    };
  };

  render() {
    const { children } = this.props;

    return (
      <ApolloProvider client={ this.client } >
        <div />
      </ApolloProvider>
    );
  }
}

Foo = withAuth(Foo);