https://github.com/miniorangedev/miniorange-react-jwt-authentication-example-app
https://github.com/miniorangedev/miniorange-react-jwt-authentication-example-app
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/miniorangedev/miniorange-react-jwt-authentication-example-app
- Owner: miniOrangeDev
- Created: 2024-09-26T11:26:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-13T06:41:13.000Z (over 1 year ago)
- Last Synced: 2025-01-13T07:25:54.144Z (over 1 year ago)
- Language: JavaScript
- Size: 64.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JWT Authentication in React App with miniOrange
This guide outlines the steps to quickly integrate JWT authentication into your React app using miniOrange as the Identity Provider.
# Installation
In the project directory, you can run:
### `npm install`
This will install all the necessary dependencies. The page will automatically reload when you make changes. You may also see any lint errors in the console.
## Configure MiniOrange
If you have not created an account in MiniOrange, please create using [this](https://www.miniorange.com/iam/free-trial) link.
### 1. Create a React JWT Application in the miniOrange Dashboard
Visit the [miniOrange Dashboard](https://login.xecurify.com) and create a new React [JWT Application](https://www.miniorange.com/iam/content-library/admin-docs/how-to-add-jwt-app).
### 2. Configure Your React Application
If you're using an existing React application, make sure the following settings are properly configured:
- **Redirect URL**: `http://localhost:3002`
- **Logout URL**: `http://localhost:3002`
These URLs should reflect the origins where your application is running. Allowed Callback URLs may also include a path, depending on where you're handling the callback in your app.
### 3. Set miniOrange as the Primary Identity Provider
- In the "Primary Identity Provider" section, select **miniOrange**.
- Click **Save**.
### 4. Download the RSA256 Certificate
- Go to **Apps**, and from the dropdown next to your configured React App, click **Select**.
- Click on **Certificate** to download the RSA256 certificate.
- Place the downloaded certificate in the `src` folder of your miniorange-react-jwt-authentication-example-app.
- In `TokenHandler.js`, ensure the certificate is imported with the name `RSA256Cert.crt`. If you change the file name, update the import statement accordingly.
### 5. Set Up Endpoints
- Click **Edit** from the dropdown next to your app in the miniOrange dashboard.
- Scroll down to the **Endpoints** section.
- As miniOrange is the primary Identity Provider, copy the **SSO URL for using miniOrange as Authentication Source** provided in the Endpoints section.
- Go to `.env` file, replace `SSO_URL` with the copied **SSO URL**.
### 7. Configure Single Logout (SLO) URL in Home.js
- Copy the **Single Logout URL** from the Endpoints section.
- Go to `.env` file, replace `SLO_URL` with the copied **Single Logout URL**.
### 8. Create a User in miniOrange
If you haven't already, [create a user](https://www.miniorange.com/iam/content-library/admin-docs/manage-users) in miniOrange.
### 9. Run the Application
In the project directory, run:
### `npm start`
Navigate to `http://localhost:3002`. Your `miniorange-react-jwt-authentication-example-app` should now be running.
### 10. Test the Login
Click the **Login** button. You’ll be redirected to the miniOrange login page. Enter the user’s credentials, and you’ll be logged into the miniOrange React app.