Cp-auth-module-react NPM

Getting started with CP Auth Module for React

This guide explains how to set up your React project to begin using CP Auth Module. It includes information on prerequisites, installing and configuring CP Auth Module.

If you are new to React or getting started with a new React application, see React's full Getting Started Guide.

For existing applications, follow the steps below to begin using CP Auth Module.

1. Install CP Auth Module

To install CP Auth Module type following command in your project's terminal:

npm install cp-auth-module-react

This will add project dependencies to package.json.

2. Create a config object

To configure the behavior of your authentication module you need to create a config object which must be with Config interface.

import Config from 'cp-auth-module-react';

export const <your-config-object>: Config = { ... };

You can choose which pages you want in your application, set them route paths and titles, choose the default input fields and the third party login services (if you have any).

You need to create a callback functions for all of the pages. They will handle the button clicks and form submits.

3. Add theme colours for the pages

In order to get the real UI of the components you need to add some variables in your main CSS file:

:root {
  --submit-button-color: #3AD551;
  --cp-auth-divider: #0000001F;
  --cp-auth-background-default: #FFFFFF;
  --cp-auth-text-primary: #000000DE;
  --cp-auth-primary-dark: #299539;
  --cp-auth-primary-main: #3AD551;
  --cp-auth-google-button-color: #4285F4;
  --cp-auth-google-button-color-hover: #3f80ea;
  --cp-auth-facebook-button-color: #1877F2;
  --cp-auth-facebook-button-color-hover: #1772e9;
  --cp-auth-apple-button-color: #000000;
  --cp-auth-button-box-shadow-color: #00000029;
}

*Remember: don't rename the variables! You can only change their values.*

Start using the CP Auth Module components

To start using the CP Auth Module components:

It's important that CP Auth Module components should be wrapped by a BrowserRouter so let's import it in your main App .js or .tsx file
Also import all the CP Auth Module pages that you need
And don't forget to import <your-config-obj> and set the different routes with that object passed into them:

import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { ResetPage, SignInPage, SignUpPage } from 'cp-auth-module-react';
import { configObj } from './config';

function App() {
  return (
    <Router>
      <Route
        path={"/" + configObj.PAGES.LOGIN.ROUTE}
        exact
        render={() => <SignInPage config={configObj} />}
      />
      <Route
        path={"/" + configObj.PAGES.REGISTER.ROUTE}
        exact
        render={() => <SignUpPage config={configObj} />}
      />
      <Route
        path={"/" + configObj.PAGES.RESET.ROUTE}
        exact
        render={() => <ResetPage config={configObj} />}
      />
    </Router>
  );
}