> For the complete documentation index, see [llms.txt](https://developer.tokeninc.com/token-developer-portal-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.tokeninc.com/token-developer-portal-1/x-platform/token-x-admin-panel-integrations/authentication-integration/internal/usage.md).

# Usage

### Authenticate

Authenticate user with guard example.

{% tabs %}
{% tab title="TS" %}

<pre class="language-tsx" data-full-width="false"><code class="lang-tsx"><strong>import { SHooks } from '@token-public-org/token-sso-react-library';
</strong>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 &#x3C;p>loading...&#x3C;/p>
    }

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

export default SecureGuard;
</code></pre>

{% endtab %}

{% tab title="JS" %}

```jsx
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;
```

{% endtab %}
{% endtabs %}

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)

{% tabs %}
{% tab title="TS" %}

```tsx
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;
```

{% endtab %}

{% tab title="JS" %}

```jsx
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;
```

{% endtab %}
{% endtabs %}

Logout with button example. (Without redirect)

{% tabs %}
{% tab title="TS" %}

```tsx
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;
```

{% endtab %}

{% tab title="JS" %}

```jsx
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;
```

{% endtab %}
{% endtabs %}

### User Details

Example to get userDetails from useSSO hook.

{% tabs %}
{% tab title="TS" %}

```tsx
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;
```

{% endtab %}

{% tab title="JS" %}

```jsx
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;
```

{% endtab %}
{% endtabs %}

### User Roles

Example to get userRoles from useSSO hook.

{% tabs %}
{% tab title="TS" %}

```tsx
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;
```

{% endtab %}

{% tab title="JS" %}

```jsx
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;
```

{% endtab %}
{% endtabs %}