Build a React App with User Authentication in 15 Minutes-JS Tutorial-php.cn

Build a React App with User Authentication in 15 Minutes

Joseph Gordon-Levitt

Release： 2025-02-16 11:54:10

Original

817 people have browsed it

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.

Build a React App with User Authentication in 15 Minutes

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:

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

Copy after login

Install the Widget: Install the Okta Sign-In Widget via npm:
```
npm install @okta/okta-signin-widget@2.3.0 --save
```
Copy after login

Add Styles: Include the widget's CSS from the Okta CDN within your index.html file's <head> 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"/>

Copy after login

Build a React App with User Authentication in 15 Minutes

Creating the LoginPage Component:

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>;
  }
}

Copy after login

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" />

Copy after login

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

Build a React App with User Authentication in 15 Minutes

Integrating the Widget:

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) ...
}

Copy after login

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.
Add Login Link: Add a login link to your navigation bar (e.g., ./src/components/common/Navigation.js).
Testing: Run npm install and npm start. The application should now display the Okta Sign-In Widget.

Build a React App with User Authentication in 15 Minutes

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!