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
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: '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.