@mosohq/auth-sdk
v1.0.42
Published
Moso Authentication SDK
Downloads
422
Readme
Usage
Using the provider
In your main layout, wrap the main application with the moso authentication provider
Example
layout.tsx
<MosoAuthenticationProvider
clientId="your client id"
provider="https://auth.moso.xyz"
audience="your audience"
>{children}</MosoAuthenticationProvider>
Using the context
After using the provider in the main layout, we can now use the context throughout the app like below
export const MyComponent = (props: {}) => {
const { isAuthenticated, getClaims, isLoading, login } = useMosoAuthentication();
useEffect(() => {
if (isAuthenticated === false && isLoading === false) {
login("your state here");
}
if (isLoading === false) {
// success
}
}, []);
if (isLoading === true) {
return <></>;
}
if (isAuthenticated === false) {
return <></>;
}
return <div>Success</div>
}
Using a higher order component (Optional)
Using a HOC (higher order component) allows devs to wrap views that should be secured to ensure the user has the appropiate permissions to access the page/view
export const useRequireAuthorization = <T extends object>(Component: React.ComponentType<T>) => (props: T) => {
const { isAuthenticated, getClaims, isLoading, login } = useMosoAuthentication();
useEffect(() => {
if (isAuthenticated === false && isLoading === false) {
login("your state");
}
if (isLoading === false) {
// success
}
}, []);
if (isLoading === true) {
return <></>;
}
if (isAuthenticated === false) {
return <></>;
}
return <Component {...props} />
}