sib-auth

Allows your users to login via a given OIDC provider.

Installation

Initialize sib-auth in your HTML file :

<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
    <sib-auth-provider
        data-authority="https://test-paris.happy-dev.fr/openid/"
        data-id="paris"
    ></sib-auth-provider>
</sib-auth>

You’ll find here the detail of the attributes configuration.

Set an OIDC provider to your server

The Django package associated is there => https://github.com/jblemee/django-oidc-provider

More documentation here => https://django-oidc-provider.readthedocs.io/en/latest/

Don’t forget to set up your RSA key:

python3 ./manage.py creatersakey

Setup your login button

Here is an example to make you understand the logic:

<button id="login">Login</button>
<!-- wherever you want in your interface -->

<script>
    // wherever you want in your project
    document.querySelector('#login').addEventListener('click', () => {
        document.querySelector('sib-auth').login()
    });
</script>

Attributes

bind-user

To associate the currently logged in user to a component, add the bind-user attribute to it. It will set its data-src attribute to the currently logged in user’s resource URL. Example:

<sib-conversation bind-user></sib-conversation>

will result in:

<sib-conversation data-src="https://your-domain/your-user-uri/3" bind-user></sib-conversation>

auto-login

If set, auto-login will automatically redirect the user to the login page of his provider if he’s not authenticated yet.

Example:

<sib-auth auto-login>
    <sib-auth-provider
        data-authority="https://test-paris.happy-dev.fr/openid/"
        data-id="paris"
    ></sib-auth-provider>
</sib-auth>

Methods

login

document.querySelector('sib-auth').login();

logout

document.querySelector('sib-auth').logout();

Get user info

document.querySelector('sib-auth').getUser();