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

Fuse v12.0.0

Browse Source
This commit is contained in:
sercan
2021-04-15 17:13:46 +03:00
commit 700d52d815
1019 changed files with 170506 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/app/modules/admin/docs/guides/authentication/jwt/jwt.html Normal file
View File

@@ -0,0 +1,131 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- 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">
<!-- Breadcrumbs -->
<div class="flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Documentation</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Guides</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">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">
JWT
</h2>
</div>
</div>
<button
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
mat-icon-button
(click)="toggleDrawer()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
</div>
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
<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>
Since Javascript cannot read or write <strong>HTTPOnly</strong> cookies, <em>refresh tokens</em> can only be accessed and set via the requests and responses by
your backend implementation. Basically, 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>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg"
[routerLink]="['../../customization/splash-screen']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Splash Screen</div>
</div>
</a>
</div>
</div>
</div>

30
src/app/modules/admin/docs/guides/authentication/jwt/jwt.ts Normal file
View File

@@ -0,0 +1,30 @@
import { Component } from '@angular/core';
import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component';
@Component({
selector : 'jwt',
templateUrl: './jwt.html',
styles : ['']
})
export class JwtComponent
{
/**
* Constructor
*/
constructor(private _guidesComponent: GuidesComponent)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle the drawer
*/
toggleDrawer(): void
{
// Toggle the drawer
this._guidesComponent.matDrawer.toggle();
}
}