React Login Examples

This repository contains three different login examples (Okta-hosted, Sign-In Widget, and custom login form). Please read A Quick Guide to React Login Options to see how it was created.

Prerequisites:

• Node 14
• Okta CLI 0.7.1+

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.

• Getting Started
• Links
• Help
• License

Getting Started

To run this example, run the following commands:

git clone https://github.com/oktadeveloper/okta-react-login-example.git
cd okta-react-login-example

Create the OIDC Application in Okta

Register for a free developer account with the following simple commands using the Okta CLI, in the project root folder:

okta register

Provide the required information. Once you register, create a client application in Okta with the following command:

okta apps create

You will be prompted to select the following options:

• Type of Application: 2: SPA
• Redirect URI: http://localhost:3000/callback
• Logout Redirect URI: http://localhost:3000

The application configuration will be printed to your screen:

Okta application configuration:
Issuer:    https://dev-133320.okta.com/oauth2/default
Client ID: 0oa5qedkihI7QcSoi357

Replace the values in src/App.js with these values.

const oktaAuth = new OktaAuth({
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{yourClientID}',
  redirectUri: window.location.origin + '/callback'
});

You'll also need to update src/OktaSignInWidget.js with your client ID.

this.oktaAuth = new OktaAuth({
  issuer: props.baseUrl,
  clientId: '{yourClientID}',
  pkce: true
});

Finally, you'll need to update src/Login.js with your Okta domain.

  return authState.isAuthenticated ?
    <Redirect to={{ pathname: '/' }}/> :
    <OktaSignInWidget
      baseUrl='https://{yourOktaDomain}'
      onSuccess={onSuccess}
      onError={onError}/>;

If you haven't done so already, install the dependencies.

npm install

Start your app and you should be able to log in.

npm start

This example uses Okta Auth JS and gives you full customization of your login form. The blog post also shows how to implement Okta-hosted login and login with the Okta Sign-In Widget.

You can find the code for those in the okta-hosted and sign-in-widget branches.

Links

This example uses the following open source libraries from Okta:

• Okta React SDK
• Okta SignIn Widget
• Okta Auth JS SDK
• Okta CLI

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.