Neoclassical Philosophic Musings

    @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.

    Install

    npm i @the91end/react-auth

    DownloadsWeekly Downloads

    63

    Version

    1.0.0

    License

    Apache-2.0

    Unpacked Size

    2.11 MB

    Total Files

    13

    Last publish

    Collaborators

    • the91end