@webiny/app-security-access-management v5.39.6
@webiny/app-security
Exposes a simple SecurityProvider
React provider component and enables you to quickly retrieve the currently signed-in user via the useSecurity
React hook.
Install
npm install --save @webiny/app-security
Or if you prefer yarn:
yarn add @webiny/app-security
Quick Example
First, make sure you mount the SecurityProvider
React provider component in your application's entrypoint component, for example the App
component:
import React from "react";
import { Routes } from "@webiny/app/components/Routes";
import { BrowserRouter } from "@webiny/react-router";
import { SecurityProvider } from "@webiny/app-security";
import Authenticator from "./components/Authenticator";
export const App = () => (
<>
{/*
<SecurityProvider> is a generic provider of identity information. 3rd party identity providers (like Cognito,
Okta, Auth0) will handle the authentication, and set the information about the user into this provider,
so other parts of the system have a centralized place to fetch user information from.
*/}
<SecurityProvider>
{/* This is the component that might trigger the initial authentication
process and set the retrieved user data into the Security provider.*/}
<Authenticator>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes />
</BrowserRouter>
</Authenticator>
</SecurityProvider>
</>
);
A simple Authenticator
React component (uses Amazon Cognito and AWS Amplify's Auth
class):
import React, { useEffect } from "react";
import { Auth } from "@aws-amplify/auth";
import { useSecurity, SecurityIdentity } from "@webiny/app-security";
// Apart from the React component, we also configure the Auth class here.
Auth.configure({
region: process.env.REACT_APP_USER_POOL_REGION,
userPoolId: process.env.REACT_APP_USER_POOL_ID,
userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID,
oauth: {
domain: process.env.REACT_APP_USER_POOL_DOMAIN,
redirectSignIn: `${location.origin}?signIn`,
redirectSignOut: `${location.origin}?signOut`,
responseType: "token"
}
});
interface AuthenticatorProps {
children: React.ReactNode;
}
// The `Authenticator` component.
const Authenticator = (props: AuthenticatorProps) => {
const { setIdentity } = useSecurity();
useEffect(() => {
// Get the currently signed-in user.
Auth.currentSession().then(response => {
const user = response.getIdToken().payload;
setIdentity(
new SecurityIdentity({
login: user.email,
firstName: user.given_name,
lastName: user.family_name,
logout: () => {
Auth.signOut();
setIdentity(null);
}
})
);
}).catch(() => { /* Do nothing. */ });
}, []);
return <>{props.children}</>;
};
export default Authenticator;
Finally, use the useSecurity
React hook in any of your components:
import React from "react";
import { useSecurity } from "@webiny/app-security";
const MyComponent = () => {
const { identity } = useSecurity();
if (identity) {
return <>Logged in.</>;
}
return <>Not logged in.</>;
};
export default MyComponent;
1 day ago
1 day ago
1 day ago
15 days ago
15 days ago
15 days ago
21 days ago
28 days ago
29 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
9 months ago
9 months ago
6 months ago
7 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
6 months ago
10 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
10 months ago
8 months ago
6 months ago
6 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
11 months ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
11 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
11 months ago
12 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
2 years ago
2 years ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
12 months ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago