a6y-react-auth

Authentication forms for React.

Demo

Getting Started

1) Install:

npm install a6y-react-auth

or

with yarn

2) Initialize

import A6YReactAuth from "a6y-react-auth"

const A6YAuth = new A6YReactAuth()

A6YAuth.initialize({
  provider: {
    type: 'cognito',
    userPoolId: 'us-east-1_xyz',
    userPoolWebClientId: 'xyz',
    identityPoolId: 'xyz',
    region: 'us-east-1',
  },
})

(check more configurable options)[#config]

3) Usage

import {Auth} from "a6y-react-auth"

<Auth />

Advanced options

A6YReactAuth default export is a function with initializing. Other exported components are described below:

Component | Description --- | --- Auth | Renders all components forms to one. The default view is set from config. SignInContainer | Renders only sign-in container with component form. SignUpContainer | Renders only sign-up container with component form. ForgotPasswordContainer | Renders only forgot-password container with component form. SignIn | Renders only sign-in component form. SignUp | Renders only sign-up component form. ForgotPassword | Renders only forgot-password component form.

Auth

param | type | description --- | --- | --- className[optional] | string | the CSS classes onSuccess[optional] | (response: unknown) => void | onSuccess callback function inputStyles[optional] | string | input CSS classes buttonStyles[optional] | string | btn CSS classes labelStyles[optional] | string | label CSS classes linkStyles[optional] | string | link CSS classes formStyles[optional] | string | form CSS classes formGroupStyles[optional] | string | form group CSS classes

example

  <AuthComponent
    className='a6y-react-auth'
    onSuccess={(response: unknown) => void}
  />

SignInContainer

param | type | description --- | --- | --- className[optional] | string | the CSS classes containerClassName[optional] | string | the CSS classes of the wrapping element onSuccess[optional]] | (response: unknown) => void | onSuccess callback function onLinkHandler[optional] | it's a link callback function to redirect the app. If not declared it's using by pathname sign-in inputStyles[optional] | string | input CSS classes buttonStyles[optional] | string | btn CSS classes labelStyles[optional] | string | label CSS classes linkStyles[optional] | string | link CSS classes formStyles[optional] | string | form CSS classes formGroupStyles[optional] | string | form group CSS classes

example

  <SignIn
    className='a6y-react-auth__sign-in'
    onSuccess={(response: unknown) => void}
    onLinkHandler={(to: string) => void}
  />

SignUpContainer

param | type | description --- | --- | --- className[optional] | string | the CSS classes containerClassName[optional] | string | the CSS classes of the wrapping element onSuccess[optional]] | (response: unknown) => void | onSuccess callback function onLinkHandler[optional] | it's a link callback function to redirect the app. If not declared it's using by pathname sign-up inputStyles[optional] | string | input CSS classes buttonStyles[optional] | string | btn CSS classes labelStyles[optional] | string | label CSS classes linkStyles[optional] | string | link CSS classes formStyles[optional] | string | form CSS classes formGroupStyles[optional] | string | form group CSS classes

example

  <SignUp
    className='a6y-react-auth__sign-up'
    onSuccess={(response: unknown) => void}
    onLinkHandler={(to: string) => void}
  />

ForgotPasswordContainer

props param | type | description --- | --- | --- className[optional] | string | the CSS classes containerClassName[optional] | string | the CSS classes of the wrapping element onSuccess[optional]] | (response: unknown) => void | onSuccess callback function onLinkHandler[optional] | (to: string) => void | it's a link callback function to redirect the app. If not declared it's using by pathname forgot-password inputStyles[optional] | string | input CSS classes buttonStyles[optional] | string | btn CSS classes labelStyles[optional] | string | label CSS classes linkStyles[optional] | string | link CSS classes formStyles[optional] | string | form CSS classes formGroupStyles[optional] | string | form group CSS classes

example

  <ForgotPassword
    className='a6y-react-auth__forgot-password'
    onSuccess={(response: unknown) => void}
    onLinkHandler={(to: string) => void}
  />

Config

Here is the full configurable options from initialize:

  provider: {
    type: string
    userPoolId: string
    userPoolWebClientId: string
    identityPoolId: string
    region: string
  }
  auth?: [{
    appId: string
    provider: string
    className?: string
    federatedIdentites?: boolean
  }],
  components?: {
    signUp?: {
      title?: string
    }
    signIn?: {
      title?: string
    }
    forgotPassword?: {
      title?: string
    }
    forgotPasswordSubmit?: {
      title?: string
    }
    consents?: {
      type?: string
      required?: boolean
      content: string
    }
  }

provider param | type | description --- | --- | --- type|string|Type of authorization service. Default is 'cognito'. userPoolId|string|UserPoolId from aws cognito userPoolWebClientId|string|UserPoolWebClientId from aws cognito identityPoolId|string| identity pool id from aws cognito region|string|region settings from aws cognito

auth param | type | description --- | --- | --- [provider]|string|It determines type of social auth provider. Available facebook or google [appId]|string|The app id or client id required by provider. [federatedIdentites]|boolean|Set to true if you want to log in with Federated Identites. Otherwise, it logs the user with User Pool. [className]|string|Adds the CSS classes.

consents param | type | description --- | --- | --- [type]|string|It determines type of consents. Available checkbox or other [required]|boolean|It determines if a field must be selected before submitting content|string|Here is the label message with consent. Message can be used with links: [title](url)

example of usage

  import A6YReactAuth from "a6y-react-auth"

  const A6YAuth = new A6YReactAuth()

  A6YAuth.initialize({
    provider: {
      type: 'cognito',
      userPoolId: 'us-east-1_xyz',
      userPoolWebClientId: 'xyz',
      identityPoolId: 'xyz',
      region: 'us-east-1',
    },
    components: {
      signIn: {
        title: 'Welcome back!' 
      },
      consents: [
        {
          type: 'checkbox',
          required: true,
          content: 'example1 (example1-link-title)[example1-url]'
        },
        {
          type: 'other',
          required: false,
          content: 'example2 (example2-link-title)[example2-url]'
        },
      ],
      auth: [
        { appId: 'xyz', provider: 'facebook' },
        { appId: 'xyz', provider: 'google' }
      ]
    }
  })

#Development

Getting started

1. Clone repository with git clone and go to cd a6y-react-auth

2. Install:

$ npm install

3. Run locally:

$ npm link

Full docs here: npm-link

4. Then go to /demo and run npm install && npm start

Open http://localhost:3000 to view it in the browser.

Storybook

build

npm run build-storybook

run

npm run storybook

Open http://localhost:6006 to view it in the browser.

Build and publish NPM

to build use npm run build or just use npm run prepublishOnly

to publish NPM npm publish

ESLint

npm run lint

or with automatic fix

npm run lint-fix

Available Scripts

Launches the test runner in the interactive watch mode.

npm run test

Development guidelines

Principles

1. Only one feature per a new branch.
2. Try to make each commit as a new record in the Changelog. (see Git section)

Process

1. Download and fetch master branch on local machine
2. Create a new branch from master. You can create:

• feature/<feature-name> - for new feature
• fix/<what-is-fixed> - to add fix
• org/<what-is-changed - to make some organizational works, like update README, update package.json, fix vulnerabilities in dependencies
• add/<what-is-added> - for small changes

3. Implement feature (check New features sections)
4. Lint & clean code
5. Make tests / add tests (?)
6. Update README.md:

• Options - add here a new props and API's functions
• Changelog - add to the list a name of the feature, fix or anything what will be released in a new version.

7. Create pull request to master branch
8. Ask for review & merge

To release a new version:

1. Create pull request to master
2. Test master branch
3. Merge pull request
4. Increment version in package.json
5. Update Changelog and others
6. Commit changes with release text
7. Run script to publish library to NPM

Git

Use master branch only to store production versions, to generate docs and publish on NPM. Tag each version.

The develop is used to sync works of developers and start working on new features, make fixes and organizational works. Each branch should have one out of the following prefixes:

• feature/<feature-name> - for new feature
• fix/<what-is-fixed> - to add fix
• org/<what-is-changed - to make some organizational works, like update README, update package.json, fix vulnerabilities in dependencies
• add/<what-is-added> - for small changes

#License

This code is released under the MIT License.