Build a React App with User Authentication in 15 Minutes

This article demonstrates integrating Okta's Sign-In Widget into a React application for user authentication. The widget, a Javascript tool, simplifies the process by leveraging Okta's infrastructure.

The tutorial starts with a basic React project, adding authentication via the Okta Sign-In Widget (installed using npm). It covers creating a LoginPage component, configuring an OpenID Connect application in Okta, and integrating the widget.

The process includes rendering the widget, verifying user login status, and adding a login link to the navigation bar. The final LoginPage component manages login, logout, and conditional rendering based on login status.

Setting Up the Project:

1. Clone the Seed Project: Begin by cloning a simple React seed project using Git:

   git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
   cd okta-react-widget-sample

2. Install the Widget: Install the Okta Sign-In Widget via npm:

   npm install @okta/okta-signin-widget@2.3.0 --save

3. Add Styles: Include the widget's CSS from the Okta CDN within your index.html file's section:

   <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
   <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>

Creating the LoginPage Component:

1. Create the Component: Create a LoginPage.js file within ./src/components/auth/. Initially, it's a simple component:

   import React from 'react';
   
   export default class LoginPage extends React.Component {
     render() {
       return <div>Login Page</div>;
     }
   }

2. Add Routing: Import LoginPage into ./src/app.js and add a route:

   // ... other imports ...
   import LoginPage from './components/auth/LoginPage';
   
   // ... within the main route ...
   <Route component={LoginPage} path="/login" />

3. Okta Application Setup: Create an OpenID Connect application in the Okta developer console. Set the redirect URI to http://localhost:3000.

Integrating the Widget:

1. Widget Initialization: In LoginPage.js, initialize the OktaSignIn widget with your Okta organization URL and Client ID:

   import React from 'react';
   import OktaSignIn from '@okta/okta-signin-widget';
   
   export default class LoginPage extends React.Component {
     // ... (constructor, componentDidMount, showLogin, logout methods as described in the original article) ...
   }

2. Rendering the Widget: Use this.widget.renderEl to render the widget within a designated div. Implement methods to check login status (componentDidMount), show the login widget (showLogin), and handle logout (logout). The complete LoginPage.js component (with error handling and login/logout functionality) is provided in the original article.

3. Add Login Link: Add a login link to your navigation bar (e.g., ./src/components/common/Navigation.js).

4. Testing: Run npm install and npm start. The application should now display the Okta Sign-In Widget.

The complete, functional code and further details on handling various authentication scenarios (social login, password reset, etc.) are available in the original article and its associated GitHub repository. Remember to replace placeholders like {oktaOrgUrl} and {clientId} with your actual Okta configuration values.

The above is the detailed content of Build a React App with User Authentication in 15 Minutes. For more information, please follow other related articles on the PHP Chinese website!