https://github.com/suhdev/react-oidc-client
A declarative approach to integrating oidc-client into React apps
https://github.com/suhdev/react-oidc-client
Last synced: about 1 year ago
JSON representation
A declarative approach to integrating oidc-client into React apps
- Host: GitHub
- URL: https://github.com/suhdev/react-oidc-client
- Owner: suhdev
- Created: 2020-06-22T18:03:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T01:54:30.000Z (over 3 years ago)
- Last Synced: 2025-02-08T20:13:51.078Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 588 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-oidc-client
The repository provides a declarative approach to working with `oidc-client`.
It wraps the different stages of the process in routes and handles everything behind the scenes.
Once authenticated, the children provided to the authentication components are rendered.
## Usage
### 1. Basic Example
```typescript
import React from "react";
import ReactDOM from "react-dom";
import { Authenticate } from "react-oidc-client";
const MySecretContent = () =>
My secure content;
ReactDOM.render(
);
```
### 2. Custom Login Complete and Logout Paths
```typescript
import React from "react";
import ReactDOM from "react-dom";
import { Authenticate } from "react-oidc-client";
const MySecretContent = () =>
My secure content;
ReactDOM.render(
);
```
### 3. Custom Loading Component
```typescript
import React from "react";
import ReactDOM from "react-dom";
import { Authenticate } from "react-oidc-client";
const MySecretContent:React.FC = () =>
My secure content;
const LoadingComponent:React.FC = ()=My loader
ReactDOM.render(
);
```
### 4. Access Loggedin User Info
```typescript
import React from "react";
import ReactDOM from "react-dom";
import { Authenticate, useUserIdentity } from "react-oidc-client";
const MySecretContent:React.FC = () => {
const user = useUserIdentity();
return
{user.profile.name}
};
const LoadingComponent:React.FC = ()=My loader
ReactDOM.render(
);
```
### 5. Using create-react-app with a non-root relative path
When using create-react-app, one might use the homepage property
if the application isn't hosted at the root of the server.
See [here](https://create-react-app.dev/docs/deployment/#building-for-relative-paths) for more info.
If that's the case, you need provide the base name (as specified in the homepage property
in order for the user to be redirected back to the appropraite page, as otherwise,
the user will be redirected to paths relative to the root. See the example below:
```typescript
import React from "react";
import ReactDOM from "react-dom";
import { Authenticate, useUserIdentity } from "react-oidc-client";
const MySecretContent:React.FC = () => {
const user = useUserIdentity();
return
{user.profile.name}
};
const LoadingComponent:React.FC = ()=My loader
ReactDOM.render(
);
```
### 6. Usage as an alternative to `msal` to work with Azure B2C
```typescript
import React from "react";
import ReactDOM from "react-dom";
import { Authenticate, useUserIdentity } from "react-oidc-client";
const MySecretContent:React.FC = () => {
const user = useUserIdentity();
return
{user.profile.name}
};
const LoadingComponent:React.FC = ()=My loader
const adTenant = "ad_tenant";
const appName = "myApp";
const userSignInFlow = "B2C_1A_signup_signin";
const adResoureceId = `https://${adTenant}.onmicrosoft.com/${appName}`
ReactDOM.render(
);
```