Add A Simple Authentication To Your React App
Tags: javascript, react, authentication, okta
Published: 2019-11-25 07:28:17

Today, I will show you how you can add a simple authentication to your react application that uses authentication from Okta which is a user management system that can be used across multiple apps built on multiple language or frameworks.
&nbsp;
It is similar to Auth0. You can use it across multiple apps and you can even use it with the apps built on different languages and platforms. 
&nbsp;
Currently Okta supports the following languages:
  - Android
  - Angular
  - iOS
  - Java
  - .NET
  - Node.js
  - PHP
  - React

&nbsp;
#<strong>Sign-Up</strong>
Before you can integrate Okta into your react application, you will need a Okta developer account. So go ahead and create your free account right now.
&nbsp;
[Free Okta Developer Account](https://developer.okta.com/signup/)
&nbsp;

# <strong>Okta Dashboard</strong>
After creating your free account, you will be redirected to the dashboard. Did you notice the *Org URL* in the dashboard. You will need that for your application. The dashboard also has user metrics and system logs that shows all the activities.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/myvgyjao0owyrdloqy7d.png)
&nbsp;

# <strong>Register Your React Application</strong>
Its time to register your react application. Click on the *Applications* link on the dashboard.
<ul>
<li> Click on Add Application
</li>
<li> Choose Single Page App
</li>
<li> Add a name to your app in the Name field
</li>
 </ul>

Now, you have to edit the *Base URI's* field. I am going to assume that you are using create-react-app on your local server.

``http://localhost:3000
``

Same thing with Login redirect URIs &  <strong>Click Done</strong>. 

``http://localhost:3000/implicit/callback
``


Now your application is registered and you will get a <strong>Client ID</strong>.
&nbsp;

# <strong>Fire up your code editor</strong>
<ol>
<li> Navigate to your project folder</li>
<li> Add the necessary packages</li>
</ol>
``yarn add react-router-dom @okta/okta-react @okta/signin-widget
``
For the sake of this example, let's assume that your react application has three pages which are suppose to be in private routes and only authorized user's have access to this routes.

/home
/user
/order
&nbsp;

# <strong>Create a Login component</strong>

Create a new folder called *auth* in your components folder and create a new file called Login.js with the following code.

```javascript
*Login.js*

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import OktaSignInWidget from './SigninWidget';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authenticated: null
    };
    this.checkAuthentication();
  }

  async checkAuthentication() {
    const authenticated = await this.props.auth.isAuthenticated();
    if (authenticated !== this.state.authenticated) {
      this.setState({ authenticated });
      this.props.history.push('/home')

    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  onSuccess = (res) => {
    if (res.status === 'SUCCESS') {
      return this.props.auth.redirect({
        sessionToken: res.session.token
      });
   } else {
    // The user can be in another authentication state that requires further action.
    // For more information about these states, see:
    //   https://github.com/okta/okta-signin-widget#rendereloptions-success-error
    }
  }

  onError = (err) => {
    console.log('error logging in', err);
  }

  render() {
    if (this.state.authenticated === null) return null;
    return this.state.authenticated ?
      <Redirect to={{ pathname: '/' }}/> :
      <OktaSignInWidget
        baseUrl={this.props.baseUrl}
        onSuccess={this.onSuccess}
        onError={this.onError}/>;
  }
});

```

Next up, you need to create a new file called *SigninWidget* in the same *auth* directory with the following code.

```javascript
*SigninWidget.js*

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

 class SigninWidget extends Component {
  componentDidMount() {
    const el = ReactDOM.findDOMNode(this);
    this.widget = new OktaSignIn({
      baseUrl: this.props.baseUrl,
      authParams: {
        pkce: true
      },
    });
    this.widget.renderEl({el}, this.props.onSuccess, this.props.onError);
  }

  componentWillUnmount() {
    this.widget.remove();
  }

  render() {
    return <div />;
  }
};

export default SigninWidget
```

Next step is to update your route file. Here is an example from my Okta implementation. Wrap private routes inside <strong>SecureRoute</strong> component and also replace <strong>Client ID</strong> and <strong>issuer</strong> with your own credentials from Okta developer console.

```javascript
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Order from "./pages/Order.js";
import Home from "./pages/Home.js";
import Users from "./pages/Users.js";
import Login from "./components/auth/Login";
import { Security, SecureRoute, ImplicitCallback } from "@okta/okta-react";

function onAuthRequired({ history }) {
  history.push("/login");
}

const AppRoute = () => (
  <Router>
    <Security
      issuer="https://dev-944example.okta.com/oauth2/default" //Replace with your ORG URI.
      clientId="0oa1ws12avokObj45C357example" //Replace with your own client id
      redirectUri={window.location.origin + "/implicit/callback"}
      onAuthRequired={onAuthRequired}
    >
      <SecureRoute exact path="/orders" component={Order} />
      <SecureRoute exact path="/users" component={Users} />
      <Route exact path="/" component={Home} />
      <Route
        path="/login"
        render={() => <Login baseUrl="https://dev-968924.okta.com" />}
      />
      <Route path="/implicit/callback" component={ImplicitCallback} />
    </Security>
  </Router>
);

export default AppRoute;

```
&nbsp;

# <strong> Create a Logout function</strong>
This is the final step. You'll want to create a logout button in your home.js file or root file which is rendered to the user after logging in and don't forget to wrap your function inside *withAuth* to use the *auth* props.

```javascript

import { withAuth } from "@okta/okta-react";
import Breadcrumb from './breadcrumb.js'
class Home extends Component {
  logout = async () => {
    this.props.auth.logout("/");
  };

  render() {
    return (
      <>
        <Breadcrumb home="Logout" click={this.logout} />
      </>
    );
  }
}

export default withAuth(Home);

```
&nbsp;

# <strong>Congratulations! 🎉</strong>

If you manage to reach this far, then I hope you have successfully integrated Okta authentication in your react application. If you run into any trouble, shoot a comment below. I will help you solve it.

This is my first *dev.to* post. In-fact, this is my first blog post ever. So I apologize if you can't fully grasp my technique. I will be back with a new one soon.

Thank you!