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
• Usage
• Configuration
• Authentication Flow
• Login with Credentials
• Login with Social Provider
• Logout
• Authentication Providers
• Default
• Stormpath
• Create your own
• Integrations
• ReactRouter
• Components
• API Reference
• License

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

• Router
• HomeRoute
• AuthenticatedRoute
• LoginRoute
• LogoutRoute

Components

• Authenticated
• NotAuthenticated
• SocialLoginLink
• SocialLoginButton
• LogoutLink
• LoginForm
• SignupForm
• ResetPasswordForm
• ChangePasswordForm
• UserProfileForm
• VerifyEmailView

API Reference

• isAuthenticated()
• loginWithCredentials(credentials)
• loginWithSocialProvider(options)
• signup(user)
• forgotPassword(options)
• verifyEmail(token)
• changePassword(options)
• updateProfile(data)
• getSession()
• setSession()
• logout()

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: '[email protected]',
  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: '[email protected]',
  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.