@8base/auth-provider

The 8base Auth Provider library contains provider with authentication state

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@8base/auth-provider
Minified + gzip package size for @8base/auth-provider in KB

Readme

8base Auth Provider

The 8base Auth Provider library contains provider with authentication state

AuthProvider

Table of Contents

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-provider';

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

Usage with @8base/create-apollo-client, @8base/apollo-links and @8base/apollo-provider

import React, { Component } from 'react';
import { BatchHttpLink } from 'apollo-link-batch-http';
import { withAuth } from '@8base/auth-provider';
import { createApolloClient } from '@8base/create-apollo-client';
import { ApolloProvider } from '@8base/apollo-provider';
import { createAuthLink,  fileUploadLink } from '@8base/apollo-links';

withAuth(
  class extends Component {
    getClient: Function;

    constructor(props: AsyncApolloProviderProps) {
      super(props);

      this.getClient = createApolloClient({
        links: [
          fileUploadLink,
          createAuthLink({
            getAuthState: this.getAuthState,
            getRefreshTokenParameters: this.getRefreshTokenParameters,
            onAuthSuccess: this.onAuthSuccess,
            onAuthError: this.onAuthError,
          }),
          new BatchHttpLink({ 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, organizationId, accountId }}} = this.props;

      return {
        idToken,
        organizationId,
        accountId,
      };
    }

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

      return (
        <ApolloProvider
          getClient={ this.getClient }
          uri={ process.env.REACT_APP_SERVER_URL }
        >
          { ({ apolloClient, isLoading }) => (<div />) }
        </ApolloProvider>
      );
    }
  }
)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.