@the91end/react-auth

1.0.0 • Public • Published

ReactAuth

Live Demo: http://reactauth.com/demo/


ReactAuth is a simple to use authentication module for React with built-in support for login (username/password and social), registration, forgotten password, and more.

Table of Contents

Installation

The easiest way to get ReactAuth is by running one of the following commands:

# Bower
bower install react-auth

# NPM
npm install react-auth

Alternatively, you may download the latest release or use the CDN:

<!--[if lte IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/Base64/0.3.0/base64.min.js"></script>
<![endif]-->
<script src="//cdn.jsdelivr.net/react-auth/1.0.0/react-auth.min.js"></script>

If installed via Bower, include one of the following script tags:

<script src="bower_components/react-auth/react-auth.js"></script>
<!-- or -->
<script src="bower_components/react-auth/react-auth.min.js"></script>

Note: ReactAuth depends on window.atob() for decoding JSON Web Tokens. If you need to support IE9 then use Base64 polyfill above.

Usage

Step 1. Initialize the module

ReactAuth.init({
	// Configuration...
});

Step 2. Import and add components to your page

import { LoginForm } from 'react-auth';

class LoginPage extends React.Component {
    render() {
        return (
            <div id="login-page">
                <LoginForm />
            </div>
        );
    }
}

Configuration

Below is a complete list of all configuration options.

// Configure ReactAuth with your own AuthProvider
ReactAuth.init({
	authProvider: customAuthProvider
});

// Configure ReactAuth with a specific/supported AuthProvider.
// Supported providers currently are 'stormpath' or 'default'.
ReactAuth.init({
	authProvider: {
		use: 'stormpath'
	}
});

Authentication Flow

Login with Credentials

This describes how the credentials (username/password) login flow works.

Login with Social Provider

This describes how the social provider (facebook, google, github) login flow works.

Logout

This describes how the logout flow works.

Authentication Providers

Default

Authenticate using your own REST API.

ReactAuth.init({
	// Below is what is being used when you don't configure the authProvider.
	authProvider: {
		use: 'default'
	}
});

Stormpath

Authenticate using Stormpath - The Identity and User Management API.

ReactAuth.init({
	authProvider: {
		use: 'stormpath'
	}
});

Create your own

Currently not available. See the StormpathAuthProvider for a reference implementation.

Integrations

ReactRouter

Components

API Reference

isAuthenticated()

Checks authentication status of a user.

Usage
import { isAuthenticated } from 'react-auth/actions';

isAuthenticated().then((authenticated) => {
  console.log(authenticated ? 'Authenticated!' : 'Not authenticated!');
});

loginWithCredentials(credentials)

Sign in using Email and Password.

Parameters
Param Type Details
credentials Object JavaScript object containing credentials to login with.
Returns
  • response - The HTTP response object from the server.
Usage
import { loginWithCredentials } from 'react-auth/actions';

let user = {
  email: 'my@email.com',
  password: 'my password'
};

loginWithCredentials(user)
  .then(function(session) {
    // E.g. redirect user here after a successful log in.
  })
  .catch(function(response) {
    // Handle errors here, such as displaying a notification
    // for invalid email and/or password.
  });

loginWithSocialProvider(options)

Sign in using a social provider (such as Facebook, Google or LinkedIn).

Parameters
Param Type Details
options Object JavaScript object containing details about the social provider to login with.
Returns

Redirects automatically to the social provider for authentication.

Usage
import { loginWithSocialProvider } from 'react-auth/actions';

let options = {
  providerId: 'google'
};

loginWithSocialProvider(options)
  .catch(function(err) {
    // Handle errors here, such as displaying a notification
    // for invalid provider options.
  });

signup(user)

Create a new account with Email and Password.

Parameters
Param Type Details
user Object JavaScript object containing user information.
Returns
  • response - The HTTP response object from the server.
Usage
import { signup } from 'react-auth/actions';

var user = {
  firstName: 'Test',
  lastName: 'Testersson',
  email: 'my@email.com',
  password: 'my password'
};

signup(user)
  .then(function(response) {
    // Redirect user here to login page or perhaps some other intermediate page
    // that requires email address verification before any other part of the site
    // can be accessed.
  })
  .catch(function(response) {
    // Handle errors here.
  });

logout()

End the current session.

Usage
import { logout } from 'react-auth/actions';

logout();

License

APACHE-2. See LICENSE.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    2
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.0
    2

Package Sidebar

Install

npm i @the91end/react-auth

Weekly Downloads

2

Version

1.0.0

License

Apache-2.0

Unpacked Size

2.11 MB

Total Files

13

Last publish

Collaborators

  • the91end