React authentication with twitch (oauth2)

We are hiring!If you care deeply about quality, teamwork, and want to build software that people love.Join Us!

Authentication as a service
Easy to integrate
Customizable
Secure token auth

Auth0.com

Authenticate

React

1Setup your application's code

2Create an Application Auth0 dashboard

3Install the Custom Social Connection extension under

4List the app under the Installed Extensions tab

5Create a twitch (oauth2) connection under Custom Social Connections

6Configure your connection settings and enable your application under the Apps tab

Setup your application's code

# installation with npm
npm install --save auth0-js

# installation with yarn
yarn add auth0-js

The auth0.js library can also be retrieved from Auth0's CDN.

<script src="https://cdn.auth0.com/js/auth0/8.12.3/auth0.min.js"></script>

Add the following lines to your base code

// src/App.js

import React, { Component } from 'react';
import { Navbar, Button } from 'react-bootstrap';
import './App.css';

class App extends Component {
  goTo(route) {
    this.props.history.replace(`/${route}`)
  }

  login() {
    this.props.auth.login();
  }

  logout() {
    this.props.auth.logout();
  }

  componentDidMount() {
    const { renewSession } = this.props.auth;

    if (localStorage.getItem('isLoggedIn') === 'true') {
      renewSession();
    }
  }

  render() {
    const { isAuthenticated } = this.props.auth;

    return (
      <div>
        <Navbar fluid>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="#">Auth0 - React</a>
            </Navbar.Brand>
            <Button
              bsStyle="primary"
              className="btn-margin"
              onClick={this.goTo.bind(this, 'home')}
            >
              Home
            </Button>
            {
              !isAuthenticated() && (
                  <Button
                    bsStyle="primary"
                    className="btn-margin"
                    onClick={this.login.bind(this)}
                  >
                    Log In
                  </Button>
                )
            }
            {
              isAuthenticated() && (
                  <Button
                    bsStyle="primary"
                    className="btn-margin"
                    onClick={this.logout.bind(this)}
                  >
                    Log Out
                  </Button>
                )
            }
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }
}

export default App;