.. _sib-auth:
sib-auth
========

Allows your users to login via a given OIDC provider.

Installation
--------------
Initialize  ``sib-auth`` in your HTML file :

.. code:: html

    <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. <https://github.com/IdentityModel/oidc-client-js/wiki#usermanager>`__

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:

.. code:: bash

    python3 ./manage.py creatersakey


Setup your login button
~~~~~~~~~~~~~~~~~~~~~~~~~~

Here is an example to make you understand the logic:

.. code:: html

    <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:
``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:

.. code:: html

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

will result in:

.. code:: html

    <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:

.. code:: html

    <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``
~~~~~~~~~

    .. code:: js

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

``logout``
~~~~~~~~~~

    .. code:: js

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

Get user info
~~~~~~~~~~~~~

    .. code:: js

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