A simple React context for managing Globus-related authentication state, built on top of the @globus/sdk.
npm install --save @globus/sdk @globus/react-auth-context
The package includes a <Provider> that can be configured with a client, scopes, and redirect that will be used to configure an AuthorizationManager instance for the context. The useGlobusAuth hook can be used to access the authentication state and the AuthorizationManager instance.
import React, { useEffect } from "react";
import { Provider, useGlobusAuth } from '@globus/react-auth-context';
/**
* Your registered Globus Client ID.
*/
const client = '645b6bfb-4195-4010-83f5-a71332bd4761';
/**
* Scopes required for your application on login.
*/
const scopes = 'urn:globus:auth:scope:transfer.api.globus.org:all';
/**
* Redirect URL that will complete the OAuth2 flow, this will also be the location you call `.handleCodeRedirect` from.
*/
const redirect = '/';
const App = () => (
/**
* The `Provider` component wraps the application and provides the authentication context.
*/
<Provider client={client} scopes={scopes} redirect={redirect}>
<ExampleComponent />
</Provider>
);
const ExampleComponent = () => {
/**
* The `useGlobusAuth` hook provides access to the authentication state and the `AuthorizationManager` instance.
*/
const { isAuthenticated, authorization } = useGlobusAuth();
useEffect(() => {
async function attempt() {
if (!authorization || isAuthenticated) {
return;
}
await instance?.handleCodeRedirect({
shouldReplace: false,
});
}
attempt();
}, [authorization, authorization?.handleCodeRedirect, isAuthenticated]);
return (
<div>
{isAuthenticated ? (
<button onClick={async () => await auth.authorization?.revoke()}>Logout</button>
) : (
<button onClick={async () => await auth.authorization?.login()}>Login</button>
)}
</div>
);
};