https://github.com/developertown/oidc-provider
OpenID Connect (OIDC) and OAuth2 protocol support for React Single Page Applications (SPA).
https://github.com/developertown/oidc-provider
hooks oauth2 oidc openid-connect react
Last synced: about 1 month ago
JSON representation
OpenID Connect (OIDC) and OAuth2 protocol support for React Single Page Applications (SPA).
- Host: GitHub
- URL: https://github.com/developertown/oidc-provider
- Owner: developertown
- License: mit
- Created: 2020-10-07T18:17:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-10-29T23:08:42.000Z (4 months ago)
- Last Synced: 2025-10-30T01:11:29.938Z (4 months ago)
- Topics: hooks, oauth2, oidc, openid-connect, react
- Language: TypeScript
- Homepage:
- Size: 818 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @developertown/oidc-provider
OpenID Connect (OIDC) and OAuth2 protocol support for React Single Page Applications (SPA).
[](https://npmjs.org/package/@developertown/oidc-provider)
[](https://npmjs.org/package/@developertown/oidc-provider)
## Installation
Using [npm](https://npmjs.org/)
```bash
npm install @developertown/oidc-provider
```
Using [yarn](https://yarnpkg.com/)
```bash
yarn add @developertown/oidc-provider
```
## Getting Started
### Auth0
`@developertown/oidc-provider` provides a simplified api for integrating Auth0. The simplified api is nearly drop in equilvalent to [@auth0/auth0-react](https://github.com/auth0/auth0-react)
Configure the SDK by wrapping your application in `Auth0Provider`:
```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { Auth0Provider } from "@developertown/oidc-provider";
import App from "./App";
ReactDOM.render(
,
document.getElementById("app")
);
```
Use the `useAuth0` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
```jsx
// src/App.js
import React from "react";
import { useAuth0 } from "@developertown/oidc-provider";
function App() {
const {
isLoading,
isAuthenticated,
error,
user,
loginWithRedirect,
logout,
} = useAuth0();
if (isLoading) {
return
Loading...;
}
if (error) {
return Oops... {error.message};
}
if (isAuthenticated) {
return (
Hello {user.name}{" "}
{
// optionally pass a returnTo url
// https://auth0.com/docs/authenticate/login/logout/redirect-users-after-logout
logout({
extraQueryParams: {
returnTo: `${window.location.origin}/logout/callback`,
},
});
// or simply logut to return to the configured redirectUri
//logout()
}}
>
Log out
);
} else {
return (
{
//optionally pass a returnTo url
loginWithRedirect({
state: { returnTo: `${window.location.href}/login/callback` },
});
// or take the defaults
//loginWithRedirect()
}}
>
Log in
);
}
}
export default App;
```
### AWS Cognito
Configure the SDK by wrapping your application in `CognitoProvider`:
```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { CognitoProvider } from "@developertown/oidc-provider";
import App from "./App";
ReactDOM.render(
,
document.getElementById("app")
);
```
Use the `useCongito` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
```jsx
// src/App.js
import React from "react";
import { useCongito } from "@developertown/oidc-provider";
function App() {
const {
isLoading,
isAuthenticated,
error,
user,
loginWithRedirect,
logout,
} = useCongito();
if (isLoading) {
return
Loading...;
}
if (error) {
return Oops... {error.message};
}
if (isAuthenticated) {
return (
Hello {user.name} logout()}>Log out
);
} else {
return Log in;
}
}
export default App;
```
### Azure AD B2C
Configure the SDK by wrapping your application in `AzureProvider`:
```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { AzureProvider } from "@developertown/oidc-provider";
import App from "./App";
ReactDOM.render(
,
document.getElementById("app")
);
```
Use the `useAzure` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
```jsx
// src/App.js
import React from "react";
import { useAzure } from "@developertown/oidc-provider";
function App() {
const {
isLoading,
isAuthenticated,
error,
user,
loginWithRedirect,
logout,
} = useAzure();
if (isLoading) {
return
Loading...;
}
if (error) {
return Oops... {error.message};
}
if (isAuthenticated) {
return (
Hello {user.name} logout()}>Log out
);
} else {
return Log in;
}
}
export default App;
```
### Other OpenID Connect
This library can be configured to work with an OpenID Connect authentication provider. Configure the SDK by wrapping your application in `OIDCProvider` see [IdentityModel/oidc-client-js](https://github.com/IdentityModel/oidc-client-js/wiki#usermanager) for the full list of options when configuring the `OIDCProvider`:
```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { OIDCProvider } from "@developertown/oidc-provider";
import App from "./App";
ReactDOM.render(
,
document.getElementById("app")
);
```
Use the `useAuth` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
```jsx
// src/App.js
import React from "react";
import { useAuth } from "@developertown/oidc-provider";
function App() {
const {
isLoading,
isAuthenticated,
error,
user,
loginWithRedirect,
logout,
} = useAuth();
if (isLoading) {
return
Loading...;
}
if (error) {
return Oops... {error.message};
}
if (isAuthenticated) {
return (
Hello {user.name} logout()}>Log out
);
} else {
return Log in;
}
}
export default App;
```
### Protect a Route
Protect a route component using the `withAuthenticationRequired` higher order component. Visits to this route when unauthenticated will redirect the user to the login page and back to this page after login:
```jsx
import React from "react";
import { withAuthenticationRequired } from "@developertown/oidc-provider";
const PrivateRoute = () =>
Private;
export default withAuthenticationRequired(PrivateRoute, {
// optionally show a message while the authentication provider initializes.
onInitializing: () =>
Checking for existing login...,
// optionally show a message while the user waits to be redirected to the login page.
onRedirecting: () => Redirecting you to the login page...,
// optionally show a message login fails.
onError: (error: Error) => {error.message},
// optionally pass parameters to `loginWithRedirect` for example a returnTo location
loginWithRedirectParams: () => ({
state: { returnTo: window.location.href },
}),
});
```
### Call an API
Call a protected API with an Access Token:
```jsx
import React, { useEffect, useState } from "react";
import { useAuth } from "@developertown/oidc-provider";
const Posts = () => {
const { getAccessTokenSilently } = useAuth();
const [posts, setPosts] = useState(null);
useEffect(() => {
(async () => {
try {
const token = await getAccessTokenSilently();
const response = await fetch("https://api.example.com/posts", {
headers: {
Authorization: `Bearer ${token}`,
},
});
setPosts(await response.json());
} catch (e) {
console.error(e);
}
})();
}, [getAccessTokenSilently]);
if (!posts) {
return
Loading...;
}
return (
- {post} ;
{posts.map((post, index) => {
return
})}
);
};
export default Posts;
```
### Events
```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import {
Auth0Provider as AuthenticationProvider,
AppState,
} from "@developertown/oidc-provider";
import App from "./App";
ReactDOM.render(
{
/* Do something with the accessToken*/
// dispatch(accessTokenChanged(accessToken))
// NOTE: this event may not be needed since getAccessTokenSilently() will always grab the latest access token
// or perform a silent refresh to get a fresh one
}}
onAccessTokenExpiring={() => {
// Let the user know their session is expiring
// NOTE: when useRefreshTokens is true accessTokens will be automatically refreshed
}}
onAccessTokenExpired={() => {
// Let the user know their session has expired
// NOTE: when useRefreshTokens is true as long as the silent refresh occurs successfully the token will not expire
}}
onAccessTokenRefreshError={(error: Error) => {
// Handle errors when silently refreshing access tokens. Only applies when useRefreshTokens is true
}}
onRedirectCallback={(appState?: AppState) => {
// Perform action after redirecting from the authentication provider
// NOTE: if no onRedirectCallback is provided the default behavior is
window.history.replaceState(
{},
document.title,
appState?.returnTo || window.location.pathname
);
}}
>
,
document.getElementById("app")
);
```
## License
This project is licensed under the MIT license. See the [LICENSE](https://github.com/developertown/oidc-provider/blob/master/LICENSE) file for more info.