Installation

First, install @authguard/react from npm:

npm install @authguard/react

yarn add @authguard/react

Now create a file authguard.ts in root directory:

import { initializeAuthguard, Provider } from "@authguard/react";

export const authguardConfig = {
  // Props
};

initializeAuthguard(authguardConfig);
export default Provider;

Below are the available props with their datatypes.

| Props | Type | | | :---------------- | :------------------------------: | ---------: | | oidc_url | String | optional | | jwks_url | String | optional | | token_url | String | optional | | redirect_url | String | optional | | authorize_url | String | optional | | user_info_url | String | optional | | refresh_token_url | String | optional | | revoke_token_url | String | optional | | grant | String | optional | | scope | String | optional | | credentials | Object (client_id,client_secret) | optional |

Usage

To be able to use useAuthguard first you'll need to expose the authguard context, , at the top level of your application:

React

<React.StrictMode>
  <AuthguardProvider>
    <App />
  </AuthguardProvider>
</React.StrictMode>

Next JS

<AuthguardProvider>
  <Component {...pageProps} />
</AuthguardProvider>

Hook

The useAuthguard() React Hook in the client is the easiest way to check if someone is signed in.

import { useAuthguard } from "@authguard/react";
const { user, logout } = useAuthguard();

References

Follow links are some reference projects that have already setup authguard.

Authguard with React Application → Authguard with Next JS Application →

License

This software is released under the MIT license. See LICENSE for more details.