Skip to content

Commit e36bfe1

Browse files
authored
Merge pull request #57 from sourcefuse/GH-20-F
feat(arc-docs):Complete Auth Module Documentation
2 parents d8d7275 + 0d4eeab commit e36bfe1

24 files changed

+457
-15
lines changed

projects/arc-docs/src/app/constants/docs-menu.constant.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,18 @@ export const DOCUMENTATION_MENU_ITEMS = [
3636
title: 'Installation',
3737
link: '/docs/auth-doc/installation',
3838
},
39+
{
40+
title: 'Getting User Token',
41+
link: '/docs/auth-doc/configureToken',
42+
},
43+
{
44+
title: 'Setting Up Api Configration',
45+
link: '/docs/auth-doc/configureEnvs',
46+
},
47+
{
48+
title: 'UI Components',
49+
link: '/docs/auth-doc/configureUI',
50+
},
3951
],
4052
},
4153
];

projects/arc-docs/src/app/docs/auth-doc/auth-doc-routing.module.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import {NgModule} from '@angular/core';
22
import {RouterModule, Routes} from '@angular/router';
33
import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdution.component';
44
import {InstallationDocComponent} from './components/installation-doc/installation-doc.component';
5+
import {ConfigureTokenDocComponent} from './components/configure-token-doc/configure-token-doc.component';
6+
import {ApiConfigureDocComponent} from './components/api-configure-doc/api-configure-doc.component';
7+
import {UiConfigureDocComponent} from './components/ui-configure-doc/ui-configure-doc.component';
58

69
const routes: Routes = [
710
{
@@ -17,6 +20,18 @@ const routes: Routes = [
1720
path: 'installation',
1821
component: InstallationDocComponent,
1922
},
23+
{
24+
path: 'configureToken',
25+
component: ConfigureTokenDocComponent,
26+
},
27+
{
28+
path: 'configureEnvs',
29+
component: ApiConfigureDocComponent,
30+
},
31+
{
32+
path: 'configureUI',
33+
component: UiConfigureDocComponent,
34+
},
2035
];
2136

2237
@NgModule({

projects/arc-docs/src/app/docs/auth-doc/auth-doc.module.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,18 @@ import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdut
66
import {CliWrapperComponent} from '@project-lib/components/cli-wrapper/cli-wrapper.component';
77
import {ThemeModule} from '@project-lib/theme/theme.module';
88
import {InstallationDocComponent} from './components/installation-doc/installation-doc.component';
9+
import {ConfigureTokenDocComponent} from './components/configure-token-doc/configure-token-doc.component';
10+
import {ApiConfigureDocComponent} from './components/api-configure-doc/api-configure-doc.component';
11+
import {UiConfigureDocComponent} from './components/ui-configure-doc/ui-configure-doc.component';
912

1013
@NgModule({
11-
declarations: [DocIntrodutionComponent, InstallationDocComponent],
12-
14+
declarations: [
15+
DocIntrodutionComponent,
16+
InstallationDocComponent,
17+
ConfigureTokenDocComponent,
18+
ApiConfigureDocComponent,
19+
UiConfigureDocComponent,
20+
],
1321
imports: [
1422
CommonModule,
1523
AuthDocRoutingModule,
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="intro-wrapper">
2+
<div class="1st-phase">
3+
<nb-card>
4+
<nb-card-header fixed>
5+
<h2 class="nb-card-header-title">BaseAPI Endpoints</h2>
6+
</nb-card-header>
7+
<nb-card-body>
8+
<p>
9+
In case of our API is localed on a separate server then we need to
10+
change the baseEndpoint accordingly:
11+
</p>
12+
<div *ngFor="let env of envVariables">
13+
<lib-cli-wrapper [command]="env.command"> </lib-cli-wrapper>
14+
</div>
15+
<p>
16+
To configure the endpoints, combine the base API URL, authentication
17+
service URL, and the specific endpoint as follows:
18+
</p>
19+
<div *ngFor="let points of baseEndPoints">
20+
<lib-cli-wrapper [command]="points.command"> </lib-cli-wrapper>
21+
</div>
22+
</nb-card-body>
23+
</nb-card>
24+
</div>
25+
</div>

projects/arc-docs/src/app/docs/auth-doc/components/api-configure-doc/api-configure-doc.component.scss

Whitespace-only changes.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
2+
3+
import {ApiConfigureDocComponent} from './api-configure-doc.component';
4+
5+
describe('ApiConfigureDocComponent', () => {
6+
let component: ApiConfigureDocComponent;
7+
let fixture: ComponentFixture<ApiConfigureDocComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ApiConfigureDocComponent],
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(ApiConfigureDocComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-api-configure-doc',
5+
templateUrl: './api-configure-doc.component.html',
6+
styleUrls: ['./api-configure-doc.component.scss'],
7+
})
8+
export class ApiConfigureDocComponent {
9+
envVariables: object[] = [
10+
{
11+
command: `export const environment = {
12+
production: false,
13+
clientId: '',
14+
publicKey: '',
15+
homePath: '/main/home',
16+
baseApiUrl: '',
17+
authServiceUrl: '',
18+
userServiceUrl: '',
19+
logLevel: 5,
20+
};
21+
`,
22+
},
23+
];
24+
25+
baseEndPoints: object[] = [
26+
{
27+
command: `baseEndpoint: '(yourDomainName)/(authServiceUrl)/(endpoint)',
28+
login: {
29+
endpoint: '/auth/login',
30+
},
31+
register: {
32+
endpoint: '/auth/sign-up',
33+
},`,
34+
},
35+
];
36+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<div class="intro-wrapper">
2+
<div class="1st-phase">
3+
<nb-card>
4+
<nb-card-header fixed>
5+
<h2 class="nb-card-header-title">
6+
Receiving user token after login/registration
7+
</h2>
8+
</nb-card-header>
9+
<nb-card-body>
10+
<ul>
11+
<li>
12+
At this step, we need to authenticate the user and get users JWT
13+
token. We follow OAuth 2.0 authentication mechanism. Here we first
14+
request for code and using that code we generate the required token.
15+
This token will be used for further requests as Authorization
16+
header.
17+
</li>
18+
<li>
19+
Let's assume that your backend returns a JWT token so that we can
20+
use the token payload to extract user info out of it. Each Strategy
21+
specifies which token class is going to be used by default.
22+
</li>
23+
<li>
24+
This authentication can be managed using different strategies. One
25+
such strategy is NbPasswordAuthStrategy. This strategy typically
26+
involves the use of an AuthToken and an AuthProvider to handle
27+
authentication tasks.
28+
<ul>
29+
<li>
30+
NbPasswordAuthStrategy is a strategy provided by Nebular for
31+
handling password-based authentication. It simplifies the
32+
process of logging in and managing user sessions.
33+
</li>
34+
<img
35+
height="350px"
36+
width="250px"
37+
src="../../.././../../assets/env_img/authmodule.png"
38+
alt="moduleImg"
39+
/>
40+
<li>
41+
AuthToken is used to manage the token received after a
42+
successful authentication. This token is essential for
43+
maintaining a session and authorizing subsequent requests to the
44+
server.
45+
</li>
46+
<li>
47+
AuthProvider is the service responsible for interacting with the
48+
backend server to perform authentication operations such as
49+
login, register, and token refresh.
50+
</li>
51+
</ul>
52+
</li>
53+
</ul>
54+
</nb-card-body>
55+
</nb-card>
56+
57+
<nb-card>
58+
<nb-card-header fixed>
59+
<h2 class="nb-card-header-title">Setting a User token</h2>
60+
</nb-card-header>
61+
<nb-card-body>
62+
<p>
63+
When we get the token, we call the authorize method. The authorize
64+
method is part of an authentication service, designed to handle the
65+
authorization process. This method initiates a request to obtain
66+
tokens and processes the response.
67+
</p>
68+
<img
69+
height="400px"
70+
width="350px"
71+
src="../../.././../../assets/env_img/method.png"
72+
alt="tokenImg"
73+
/>
74+
<p>
75+
Process Response:If the response contains an access token and a
76+
refresh token: Save the tokens and their expiry. Navigate the user to
77+
the last accessed URL or the home path.Return true indicating
78+
successful authorization. If tokens are not received, return false
79+
</p>
80+
81+
<img
82+
height="250px"
83+
width="350px"
84+
src="../../.././../../assets/env_img/token.png"
85+
alt="tokenImg"
86+
/>
87+
88+
<div style="text-align: center; margin-top: 20px">
89+
<a
90+
href="https://akveo.github.io/nebular/docs/getting-started/what-is-nebular#what-is-nebular"
91+
target="_blank"
92+
>
93+
If you want to explore further, please refer to Nebular</a
94+
>
95+
</div>
96+
</nb-card-body>
97+
</nb-card>
98+
</div>
99+
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
a {
2+
text-decoration: none;
3+
color: #19a5ff;
4+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
2+
3+
import {ConfigureTokenDocComponent} from './configure-token-doc.component';
4+
5+
describe('ConfigureTokenDocComponent', () => {
6+
let component: ConfigureTokenDocComponent;
7+
let fixture: ComponentFixture<ConfigureTokenDocComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ConfigureTokenDocComponent],
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(ConfigureTokenDocComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});

0 commit comments

Comments
 (0)