purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-12-20 17:17:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Second pass on the formatting.

Browse Source
This commit is contained in:
Sercan Yemen
2024-05-27 14:06:26 +03:00
parent 8545291203
commit 7782dbd3db
658 changed files with 48434 additions and 36597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/modules/admin/docs/guides/authentication/jwt/jwt.html
View File

@@ -1,62 +1,81 @@
<div class="flex flex-col flex-auto min-w-0">
<div class="flex min-w-0 flex-auto flex-col">
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<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>
<a class="whitespace-nowrap text-primary-500"
>Documentation</a
>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<div class="ml-1 flex items-center whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_mini:chevron-right'"></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="flex items-center ml-1 whitespace-nowrap">
<div class="ml-1 flex items-center whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_mini:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Authentication</span>
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="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
<h2
class="truncate text-3xl font-extrabold leading-7 tracking-tight sm:leading-10 md:text-4xl"
>
JWT
</h2>
</div>
</div>
<button
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
class="order-first -ml-3 mb-2 sm:order-last sm:mb-0 sm:ml-0"
mat-icon-button
(click)="toggleDrawer()">
(click)="toggleDrawer()"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button>
</div>
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
<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.
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:
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>
<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>
<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>
<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>
@@ -67,47 +86,62 @@
<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.
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.
<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.
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!
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.
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>.
<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>
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.
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>

16
src/app/modules/admin/docs/guides/authentication/jwt/jwt.ts
View File

@@ -4,19 +4,16 @@ import { MatIconModule } from '@angular/material/icon';
import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component';
@Component({
selector : 'jwt',
selector: 'jwt',
templateUrl: './jwt.html',
standalone : true,
imports : [MatIconModule, MatButtonModule],
standalone: true,
imports: [MatIconModule, MatButtonModule],
})
export class JwtComponent
{
export class JwtComponent {
/**
* Constructor
*/
constructor(private _guidesComponent: GuidesComponent)
{
}
constructor(private _guidesComponent: GuidesComponent) {}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
@@ -25,8 +22,7 @@ export class JwtComponent
/**
* Toggle the drawer
*/
toggleDrawer(): void
{
toggleDrawer(): void {
// Toggle the drawer
this._guidesComponent.matDrawer.toggle();
}