fuse-angular/src/app/modules/admin/docs/guides/authentication/jwt/jwt.html

<div class="flex min-w-0 flex-auto flex-col">
    <!-- Header -->
    <div
        class="bg-card flex flex-0 flex-col border-b p-6 dark:bg-transparent sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8"
    >
        <div class="min-w-0 flex-1">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500"
                        >Documentation</a
                    >
                </div>
                <div class="ml-1 flex items-center whitespace-nowrap">
                    <mat-icon
                        class="text-secondary icon-size-5"
                        [svgIcon]="'heroicons_mini:chevron-right'"
                    ></mat-icon>
                    <a class="ml-1 text-primary-500">Guides</a>
                </div>
                <div class="ml-1 flex items-center whitespace-nowrap">
                    <mat-icon
                        class="text-secondary icon-size-5"
                        [svgIcon]="'heroicons_mini:chevron-right'"
                    ></mat-icon>
                    <span class="text-secondary ml-1">Authentication</span>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2
                    class="truncate text-3xl font-extrabold leading-7 tracking-tight sm:leading-10 md:text-4xl"
                >
                    JWT
                </h2>
            </div>
        </div>
        <button
            class="order-first -ml-3 mb-2 sm:order-last sm:mb-0 sm:ml-0"
            mat-icon-button
            (click)="toggleDrawer()"
        >
            <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
        </button>
    </div>

    <div class="prose prose-sm max-w-3xl flex-auto p-6 sm:p-10">
        <p>
            Fuse provides an implementation for JWT authorization. You can
            immediately hook up your backend API where you generate a JWT token
            and send it back and start using Fuse's JWT implementation.
        </p>
        <p>
            This implementation of JWT can be found within
            <code>app/core/auth/</code> directory. Here's the quick overview of
            provided files:
        </p>
        <ul>
            <li>
                <p><strong>Guards:</strong></p>
                <p>
                    <em>auth</em> and <em>noAuth</em> guards to protect the
                    routes.
                </p>
            </li>
            <li>
                <p><strong>AuthInterceptor</strong></p>
                <p>
                    An interceptor to attach the <em>access token</em> to the
                    header of the requests and catching 401 responses.
                </p>
            </li>
            <li>
                <p><strong>AuthService</strong></p>
                <p>
                    A service for signing in and out as well as checking the
                    authenticated status of the user.
                </p>
            </li>
            <li>
                <p><strong>AuthUtils</strong></p>
                <p>Set of utilities to decode the JWT token.</p>
            </li>
        </ul>

        <h2>Setting up</h2>
        <h3>1. Set up your backend API</h3>
        <p>
            Before start doing anything within Fuse, prepare your backend API.
            You will need API endpoints for <strong>signing in</strong>,
            <strong>signing out</strong> and
            <strong>refreshing the token</strong>. These will usually be
            provided with your choice of JWT backend implementation by default
            so you don't have to do too much work.
        </p>

        <h3>2. Configure the AuthService</h3>
        <p>
            <strong>AuthService</strong> includes methods for signing in and out
            as well as refreshing the token. Edit the
            <strong>AuthService</strong> file and change the API endpoints so
            the requests can go through.
        </p>
        <p>
            And that's pretty much it! You can now sign in, sign out and refresh
            the access token.
        </p>

        <h2>A note about storing the access token</h2>
        <p>
            Fuse stores the access token in the <strong>local storage</strong>.
            There are a lot of debates going on about whether it is safe or not
            to store it in the local storage. We believe it doesn't matter.
            Javascript always going to be executed in the browser, it doesn't
            matter where you store the JWT token, whether in the local storage
            or in the memory as a variable, it can always be accessed and read!
        </p>
        <p>
            The only thing you have to be careful about is to protect your app
            against attacks like XSS, CSRF or XSRF. Angular does an amazingly
            good job to protect you against these attacks by default but still,
            you have to be careful what to include into your app. And if you
            happen to have a security hole that can cause these attacks and
            allows attackers to run their own Javascript code on your app, local
            JWT token is going to be the least of your worries.
        </p>

        <h2>Refresh token</h2>
        <p>
            <em>Refresh token</em> is another type of token that usually sent
            with the <em>access token</em> when you first login and it allows
            refreshing the <em>access token</em>.
        </p>
        <p>
            We are not going to go into any details about it since you can do
            your own research, but the premise is, you store the
            <em>refresh token</em> in an <strong>HTTPOnly</strong> cookie which
            will be automatically added into the header of any request and can
            be used to sending back a fresh <em>access token</em>
            from your backend API if needed.
        </p>
        <p>
            The <em>refresh token</em> implementation needs to be done in your
            backend, there is nothing that can be done in Fuse or in Javascript.
        </p>
    </div>
</div>