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.
- 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
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.
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>
);
}
}
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'
}
});
This describes how the credentials (username/password) login flow works.
This describes how the social provider (facebook, google, github) login flow works.
This describes how the logout flow works.
Authenticate using your own REST API.
ReactAuth.init({
// Below is what is being used when you don't configure the authProvider.
authProvider: {
use: 'default'
}
});
Authenticate using Stormpath - The Identity and User Management API.
ReactAuth.init({
authProvider: {
use: 'stormpath'
}
});
Currently not available. See the StormpathAuthProvider
for a reference implementation.
Authenticated
NotAuthenticated
SocialLoginLink
SocialLoginButton
LogoutLink
LoginForm
SignupForm
ResetPasswordForm
ChangePasswordForm
UserProfileForm
VerifyEmailView
isAuthenticated()
loginWithCredentials(credentials)
loginWithSocialProvider(options)
signup(user)
forgotPassword(options)
verifyEmail(token)
changePassword(options)
updateProfile(data)
getSession()
setSession()
logout()
Checks authentication status of a user.
import { isAuthenticated } from 'react-auth/actions';
isAuthenticated().then((authenticated) => {
console.log(authenticated ? 'Authenticated!' : 'Not authenticated!');
});
Sign in using Email and Password.
Param | Type | Details |
---|---|---|
credentials | Object |
JavaScript object containing credentials to login with. |
- response - The HTTP response object from the server.
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.
});
Sign in using a social provider (such as Facebook, Google or LinkedIn).
Param | Type | Details |
---|---|---|
options | Object |
JavaScript object containing details about the social provider to login with. |
Redirects automatically to the social provider for authentication.
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.
});
Create a new account with Email and Password.
Param | Type | Details |
---|---|---|
user | Object |
JavaScript object containing user information. |
- response - The HTTP response object from the server.
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.
});
End the current session.
import { logout } from 'react-auth/actions';
logout();
APACHE-2. See LICENSE.