1.1.2 • Published 9 months ago
@espresso-lab/mantine-cognito v1.1.2
Mantine meets AWS Cognito 🚀
This is a simple wrapper for the Mantine UI library to work with AWS Cognito.
Installation
npm i @espresso-lab/mantine-cognito
Usage
<MantineAuth>
-Provider
import { MantineAuth, MFASetup } from "@espresso-lab/mantine-cognito";
function App() {
return (
<MantineAuth
cognitoUserPoolId="<cognito-user-pool-id>"
cognitoClientId="<cognito-client-id>"
language="en"
>
<p>You are logged in!</p>
<MFASetup mfaAppName="Test" />
</MantineAuth>
);
}
export default App;
In the example above, the MantineAuth
component will handle the authentication flow with AWS Cognito. The MFASetup
component will handle the MFA setup flow.
useAuth()
-Hook
import { Button, Paper, Title } from "@mantine/core";
import { useAuth } from "@espresso-lab/mantine-cognito";
export function AnyComponent() {
const { logout, userAttributes } = useAuth();
const { given_name } = userAttributes || {};
return (
<Paper>
<Title>Hello {given_name}</Title>
<Button onClick={logout}>Logout</Button>
</Paper>
);
}
In the example above, the useAuth
hook is used to get the user attributes and the logout function.
The useAuth
hook works only inside the MantineAuth
-Provider.
Backend authorization
import { getIdToken, getAccessToken } from "@espresso-lab/mantine-cognito";
export async function myApiCall() {
fetch("https://example.com/api", {
method: "GET",
headers: {
"Authorization": await getIdToken() ?? ""
}
});
}
1.1.2
9 months ago
1.1.1
9 months ago
1.1.0
9 months ago
1.0.2
9 months ago
1.0.1
9 months ago
1.0.0
9 months ago
0.0.18
9 months ago
0.0.17
9 months ago
0.0.16
9 months ago
0.0.15
9 months ago
0.0.14
9 months ago
0.0.13
9 months ago
0.0.12
9 months ago
0.0.11
9 months ago
0.0.10
9 months ago
0.0.9
9 months ago
0.0.8
9 months ago
0.0.7
9 months ago
0.0.6
9 months ago
0.0.4
9 months ago
0.0.3
9 months ago
0.0.2
9 months ago
0.0.1
9 months ago