@mosohq/auth-sdk

Moso Authentication SDK

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} />
}