# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.tokeninc.com/token-developer-portal-1/x-platform/token-x-admin-panel-integrations/authentication-integration/internal/usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.