Skip to content

Latest commit

 

History

History

custom-login

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
env
env
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
bs-config.js
bs-config.js
 
 
index.html
index.html
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

README.md

Okta React + Custom Login Example

This example shows you how to use the Okta React Library and React Router to login a user to a React application. The login is achieved with the Okta Sign In Widget, which gives you more control to customize the login experience within your app.

This example is built with Create React App.

Prerequisites

Before running this sample, you will need the following:

  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Single-Page App (SPA) mode. This is done from the Okta Developer Console, you can see the OIDC SPA Setup Instructions. When following the wizard, use the default properties. They are designed to work with our sample applications.

Enable Refresh Tokens

Add a required setting to your SPA Okta app to avoid third-party cookies. Navigate to Applications > Applications and select this application to edit. Find the General Settings and press Edit. Enable Refresh Token in the Grant type section. Save your changes.

Running This Example

To run this application, you first need to clone this repo:

git clone https://github.com/okta/samples-js-react.git

Then install dependencies:

npm install

Enter into custom-login directory:

cd samples-js-react/custom-login

Now you need to gather the following information from the Okta Developer Console:

  • Client Id - The client ID of the SPA application that you created earlier. This can be found on the "General" tab of an application, or the list of applications. This identifies the application that tokens will be minted for.
  • Issuer - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.oktapreview.com/oauth2/default.

These values must exist as environment variables. They can be exported in the shell, or saved in a file named testenv, at the root of this repository. (This is the parent directory, relative to this README) See dotenv for more details on this file format.

ISSUER=https://yourOktaDomain.com/oauth2/default
CLIENT_ID=123xxxxx123

NOTE: If you are running the sample against an org that has Okta's Identity Engine enabled, you will need to add the following environment variable to your testenv file USE_INTERACTION_CODE=true With variables set, start the app server:

npm start

You could also start the app server from root directory like:

npm run custom-login-server

Now navigate to http://localhost:8080 in your browser.

If you see a home page that prompts you to login, then things are working! Clicking the Log in button will render a custom login page component that uses the Okta Sign-In Widget to perform authentication.

You can login with the same account that you created when signing up for your Developer Org, or you can use a known username and password from your Okta Directory.

Note: If you are currently using your Developer Console, you already have a Single Sign-On (SSO) session for your Org. You will be automatically logged into your application as the same user that is using the Developer Console. You may want to use an incognito tab to test the flow from a blank slate.

Integrating The Resource Server

If you were able to successfully login in the previous section you can continue with the resource server example. Please download and run one of these sample applications in another terminal:

Once you have the resource server running (it will run on port 8000) you can visit the /messages page within the React application to see the authentication flow. The React application will use its stored access token to authenticate itself with the resource server, you will see this as the Authorization: Bearer <access_token> header on the request if you inspect the network traffic in the browser.