Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/derrickmstrong/okta-react
OKTA CLI + React app
https://github.com/derrickmstrong/okta-react
Last synced: 30 days ago
JSON representation
OKTA CLI + React app
- Host: GitHub
- URL: https://github.com/derrickmstrong/okta-react
- Owner: derrickmstrong
- Created: 2021-02-14T02:15:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-07T20:00:53.000Z (about 2 years ago)
- Last Synced: 2023-03-10T00:08:15.277Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 727 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Okta React + Okta Hosted Login Example
This example shows how to use the [Okta React Library][] and [React Router](https://github.com/ReactTraining/react-router) to login a user to a React application. The login is achieved through the [PKCE Flow][], where the user is redirected to the Okta-Hosted login page. After the user authenticates they are redirected back to the application with an ID token and access token.
This example is built with [Create React App][] https://youtu.be/V3G8-nfWQoM.
## Prerequisites
Before running this sample, you will need the following:
* [The Okta CLI Tool](https://github.com/okta/okta-cli#installation)
* An Okta Developer Account (create one using `okta register`, or configure an existing one with `okta login`)
## Get the Code
Grab and configure this project using `okta start react`.
Follow the instructions printed to the console.
## Run the Example
To run this application, install its dependencies:
```
npm install
```
With variables set, start your app:
```
npm start
```
Navigate to http://localhost:3000 in your browser.
If you see a home page that prompts you to login, then things are working! Clicking the **Log in** button will redirect you to the Okta hosted sign-in page.
You can sign in 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:
* [Node/Express Resource Server Example](https://github.com/okta/samples-nodejs-express-4/tree/master/resource-server)
* [Java/Spring MVC Resource Server Example](https://github.com/okta/samples-java-spring/tree/master/resource-server)
* [ASP.NET](https://github.com/okta/samples-aspnet/tree/master/resource-server) and [ASP.NET Core](https://github.com/okta/samples-aspnetcore/tree/master/samples-aspnetcore-3x/resource-server) Resource Server Examples
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 ` header on the request if you inspect the network traffic in your browser.
[Create React App]: https://create-react-app.dev
[Okta React Library]: https://github.com/okta/okta-react
[OIDC SPA Setup Instructions]: https://developer.okta.com/docs/guides/sign-into-spa/react/before-you-begin
[PKCE Flow]: https://developer.okta.com/docs/guides/implement-auth-code-pkce
[Okta Sign In Widget]: https://github.com/okta/okta-signin-widget
* npm run resource-server
Navigate to http://localhost:8000 in your browser.