Usage

Usage of library with examples.

Authenticate

Authenticate user with guard example.

TS

import { SHooks } from '@token-public-org/token-sso-react-library';
import type { ReactNode } from 'react';

const { useSSO } = SHooks;

type Props = {
    children:ReactNode
}

const SecureGuard = ({children}:Props)=>{
    const { authenticated, login, initialized } = useSSO();
    
    // Wait until sso initialized
    if(!initialized){
        return <p>loading...</p>
    }

    // If authenticated return children
    if(authenticated){
        return children;
    }
    
    // Else redirect to login page
    login({
        redirectUri: window.location.href
    });
}

export default SecureGuard;

JS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const SecureGuard = ({children})=>{
    const { authenticated, login, initialized } = useSSO();
    
    // Wait until sso initialized
    if(!initialized){
        return <p>loading...</p>
    }

    // If authenticated return children
    if(authenticated){
        return children;
    }
    
    // Else redirect to login page
    login({
        redirectUri: window.location.href
    });
}

export default SecureGuard;

1. Guard render in dom,

2. Check user authenticated,

   1. If authenticated render page.

   2. Else redirect to login page.

Logout

Logout with button example. (With redirect)

TS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { logout } = useSSO();

    const handleLogout = ()=>{
        // Logout and redirect back to origin
        logout({ redirectUri: encodeURI(window.location.origin) }); 
    }
    
    return(
        <button onClick={handleLogout}>Logout</button>
    )
}

export default AccountPage;

JS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { logout } = useSSO();

    const handleLogout = ()=>{
        // Logout and redirect back to origin
        logout({ redirectUri: encodeURI(window.location.origin) }); 
    }
    
    return(
        <button onClick={handleLogout}>Logout</button>
    )
}

export default AccountPage;

Logout with button example. (Without redirect)

TS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { logout } = useSSO();

    const handleLogout = ()=>{
        // Logout and dont make any redirect !
        logout({ withRedirect: false }); 
        
        // Do it anything...
    }
    
    return(
        <button onClick={handleLogout}>Logout</button>
    )
}

export default AccountPage;

JS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { logout } = useSSO();

    const handleLogout = ()=>{
        // Logout and dont make any redirect !
        logout({ withRedirect: false }); 
        
        // Do it anything...
    }
    
    return(
        <button onClick={handleLogout}>Logout</button>
    )
}

export default AccountPage;

User Details

Example to get userDetails from useSSO hook.

TS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { userDetails } = useSSO();
    
    ...mainpulate "userDetails" your own.
}

export default AccountPage;

JS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { userDetails } = useSSO();
    
    ...mainpulate "userDetails" your own.
}

export default AccountPage;

User Roles

Example to get userRoles from useSSO hook.

TS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { roles:userRoles } = useSSO();
    
    ...mainpulate "userRoles" your own.
}

export default AccountPage;

JS

import { SHooks } from '@token-public-org/token-sso-react-library';

const { useSSO } = SHooks;

const AccountPage = ()=>{
    const { roles:userRoles } = useSSO();
    
    ...mainpulate "userRoles" your own.
}

export default AccountPage;