From b38a90b23fcbf5a3b082a1e332215e661b6112fe Mon Sep 17 00:00:00 2001 From: gitcommitshow Date: Mon, 1 Aug 2022 09:17:31 +0530 Subject: [PATCH] fix: backend integration bugs and status messages --- app.js | 2 + .../generate-token.component.html | 8 +-- .../generate-token.component.ts | 4 +- .../app/send-jwt1/send-jwt1.component.html | 9 ++- .../app/send-jwt1/send-jwt1.component.scss | 7 +- .../src/app/send-jwt1/send-jwt1.component.ts | 21 ++++-- .../app/send-jwt2/send-jwt2.component.html | 11 +++- .../app/send-jwt2/send-jwt2.component.scss | 5 ++ .../src/app/send-jwt2/send-jwt2.component.ts | 12 +++- .../app/send-jwt3/send-jwt3.component.html | 28 ++++---- .../app/send-jwt3/send-jwt3.component.scss | 9 ++- .../src/app/send-jwt3/send-jwt3.component.ts | 19 +++++- .../app/send-jwt4/send-jwt4.component.html | 11 +++- .../src/app/send-jwt4/send-jwt4.component.ts | 19 +++++- .../src/app/shared/services/demo.service.ts | 10 +-- frontend/src/assets/i18n/en.json | 28 ++++---- frontend/src/assets/images/icon-error.svg | 66 +++++++++++++++++++ routes/demo.js | 14 ++++ services/DemoAuthService.js | 6 ++ 19 files changed, 226 insertions(+), 63 deletions(-) create mode 100644 frontend/src/assets/images/icon-error.svg diff --git a/app.js b/app.js index c635be7..2e477e5 100644 --- a/app.js +++ b/app.js @@ -42,6 +42,8 @@ app.use(function(req, res, next){ } else { req.wantsJson = true; } + console.debug(new Date().toString() + "Requested :: ", req.method, req.url); + console.debug(req.headers) next(); }) diff --git a/frontend/src/app/generate-token/generate-token.component.html b/frontend/src/app/generate-token/generate-token.component.html index adea05a..0fa0bf9 100644 --- a/frontend/src/app/generate-token/generate-token.component.html +++ b/frontend/src/app/generate-token/generate-token.component.html @@ -2,10 +2,10 @@

{{ "generate-token.create" | transloco }}

-

+

{{ "generate-token.algorithm" | transloco }} Recommend algorithms -

+
- -

{{"generate-token.data" | transloco}}

+
+
{{"generate-token.data" | transloco}}
diff --git a/frontend/src/app/generate-token/generate-token.component.ts b/frontend/src/app/generate-token/generate-token.component.ts index f11f579..3de6519 100644 --- a/frontend/src/app/generate-token/generate-token.component.ts +++ b/frontend/src/app/generate-token/generate-token.component.ts @@ -11,7 +11,9 @@ import { StepService } from '../shared/services/step.service'; export class GenerateTokenComponent implements OnInit { payloadValue = '{ "data" : "We raised series A" }' - algo ="RS256" + //TODO Update payload to {"data":"This is Pradeep with id xyz and he can access files owned by xyz","iat":1646252217,"exp":1646338617,"aud":"supertokens.com","iss":"Supertokens Inc","sub":"auth@supertokens.com"} + + algo ="HS256" @Input() token = "" diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.html b/frontend/src/app/send-jwt1/send-jwt1.component.html index 07aadbc..c7f265b 100644 --- a/frontend/src/app/send-jwt1/send-jwt1.component.html +++ b/frontend/src/app/send-jwt1/send-jwt1.component.html @@ -4,9 +4,14 @@

{{ "send-jwt1.introduction" | transloco }}

-
+
- {{ "send-jwt1.authenticated" | transloco | uppercase }} + {{ successText | transloco | uppercase }} +
+ +
+ + {{ errorText | transloco | uppercase }}
diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.scss b/frontend/src/app/send-jwt1/send-jwt1.component.scss index 10691f6..33e0402 100644 --- a/frontend/src/app/send-jwt1/send-jwt1.component.scss +++ b/frontend/src/app/send-jwt1/send-jwt1.component.scss @@ -20,6 +20,11 @@ } } +.rectangle.error { + border: solid 1px rgba(255, 5, 5, 0.75); + background-color: rgba(209, 66, 31, 0.15); +} + .rectangle1 { width: 668px; height: 405px; @@ -29,7 +34,7 @@ border: dashed 1px #505255; .box { - width: 331.1px; + width: fit-content; height: 30.5px; padding: 6px 12.2px 8.5px 12.3px; border-radius: 6px; diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.ts b/frontend/src/app/send-jwt1/send-jwt1.component.ts index 20702d1..2de9d2e 100644 --- a/frontend/src/app/send-jwt1/send-jwt1.component.ts +++ b/frontend/src/app/send-jwt1/send-jwt1.component.ts @@ -1,3 +1,4 @@ +import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { DemoService } from '../shared/services/demo.service'; @@ -17,16 +18,26 @@ export class SendJwt1Component implements OnInit { ) { this.stepService.setStep(7) } + ngOnInit(): void { } - successToken = false + + successText = ""; + errorText = ""; + sendJwtThroughRequestParameter(){ var myToken = localStorage.getItem('token') - this.demoService.remote().getFromRequestParameter(myToken).subscribe({ + this.demoService.remote().sendTokenViaRequestParam(myToken).subscribe({ next: (success: any)=>{ - this.successToken = true - }, error: (error: any) => { - console.error('error:', error); + console.log("success") + this.errorText = "" + this.successText = success && success.statusText ? success.statusText : "Authenticated" + }, + complete: () => console.log("Sent token in request parameter"), + error: (error: HttpErrorResponse) => { + this.successText = ""; + this.errorText = error.statusText || "Unsuccessful" + console.error('error:', error) }, }) } diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.html b/frontend/src/app/send-jwt2/send-jwt2.component.html index 3742ada..3276fcf 100644 --- a/frontend/src/app/send-jwt2/send-jwt2.component.html +++ b/frontend/src/app/send-jwt2/send-jwt2.component.html @@ -4,9 +4,14 @@

{{ "send-jwt2.introduction" | transloco }}

-
- - {{ "send-jwt2.authenticated" | transloco | uppercase }} +
+ + {{ successText | transloco | uppercase }} +
+ +
+ + {{ errorText | transloco | uppercase }}
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.scss b/frontend/src/app/send-jwt2/send-jwt2.component.scss index 7a3de42..15e73da 100644 --- a/frontend/src/app/send-jwt2/send-jwt2.component.scss +++ b/frontend/src/app/send-jwt2/send-jwt2.component.scss @@ -20,6 +20,11 @@ } } +.rectangle.error { + border: solid 1px rgba(255, 5, 5, 0.75); + background-color: rgba(209, 66, 31, 0.15); +} + .rectangle1 { width: 668px; height: 419px; diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.ts b/frontend/src/app/send-jwt2/send-jwt2.component.ts index 002a38a..a202281 100644 --- a/frontend/src/app/send-jwt2/send-jwt2.component.ts +++ b/frontend/src/app/send-jwt2/send-jwt2.component.ts @@ -12,6 +12,9 @@ export class SendJwt2Component implements OnInit { token: any | null + successText = ""; + errorText = ""; + constructor( private router : Router, private demoService : DemoService, @@ -26,12 +29,15 @@ export class SendJwt2Component implements OnInit { } sendJwtThroughBody(value: string){ - this.token = value - this.demoService.remote().postFromBody(value).subscribe({ + this.demoService.remote().sendTokenViaWebFormBody(value).subscribe({ next: (success: any)=>{ - console.log('yes') + console.log('Authenticated') + this.errorText = ""; + this.successText = success && success.statusText ? success.statusText : "You have been successfully authenticated" }, error: (error: any) => { console.error('error:', error); + this.successText = ""; + this.errorText = error && error.statusText ? error.statusText : "Authentication failed" }, }) } diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.html b/frontend/src/app/send-jwt3/send-jwt3.component.html index 26507c7..1588a24 100644 --- a/frontend/src/app/send-jwt3/send-jwt3.component.html +++ b/frontend/src/app/send-jwt3/send-jwt3.component.html @@ -4,9 +4,14 @@

{{ "send-jwt3.introduction" | transloco }}

-
+
- {{ "send-jwt3.authenticated" | transloco | uppercase }} + {{ successText }} +
+ +
+ + {{ errorText | transloco | uppercase }}
@@ -17,18 +22,13 @@

{{ "send-jwt3.request" | transloco }}

-            Sample Response
-            HTTP/1.1 200 OK
-            Content-Type: application/json;charset=UTF-8
-            Cache-Control: no-store
-            Pragma: no-cache
-            
-            {{'send-jwt3.openBracket' | transloco}}
-            "access_token":"mF_9.B5f-4.1JqM",
-            "token_type":"Bearer",
-            "expires_in":3600,
-            "refresh_token":"tGzv3JOkF0XG5Qx2TlKWIA"
-            {{ 'send-jwt3.closeBracket' | transloco}}
+            Sample Request
+            Request URL: /demo/protected/api/bearer
+            Request Method: GET
+
+            --Headers--
+            Content-Type: application/json
+            Authorization: "Bearer thetoken"
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.scss b/frontend/src/app/send-jwt3/send-jwt3.component.scss index 7dd65c8..df2dea7 100644 --- a/frontend/src/app/send-jwt3/send-jwt3.component.scss +++ b/frontend/src/app/send-jwt3/send-jwt3.component.scss @@ -1,6 +1,6 @@ .rectangle { width: 667px; - height: 53px; + height: fit-content; padding: 16.5px 223.1px 15.5px 19.9px; border-radius: 12px; border: solid 1px rgba(0, 195, 15, 0.75); @@ -20,6 +20,11 @@ } } +.rectangle.error { + border: solid 1px rgba(255, 5, 5, 0.75); + background-color: rgba(209, 66, 31, 0.15); +} + .rectangle1 { width: 668px; height: 721px; @@ -29,7 +34,7 @@ border: dashed 1px #505255; .innerRectangle { width: 604px; - height: 346px; + height: fit-content; border-top-left-radius: 12px; border-top-right-radius: 12px; border: solid 1px #3c4053; diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.ts b/frontend/src/app/send-jwt3/send-jwt3.component.ts index a4beeef..16b2cdf 100644 --- a/frontend/src/app/send-jwt3/send-jwt3.component.ts +++ b/frontend/src/app/send-jwt3/send-jwt3.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { StepService } from '../shared/services/step.service'; import { DemoService } from '../shared/services/demo.service' -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; @Component({ selector: 'app-send-jwt3', @@ -11,6 +11,9 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; }) export class SendJwt3Component implements OnInit { + successText = ""; + errorText = ""; + constructor( private router: Router, private demoService: DemoService, @@ -27,8 +30,18 @@ export class SendJwt3Component implements OnInit { var headers = new HttpHeaders() .set("Content-Type", "application\/json") .set("Authorization", "Bearer " + token) - this.demoService.remote().getFromRequestHeader(headers).subscribe((response)=>{ - console.log(response) + this.demoService.remote().sendTokenViaRequestHeader(headers).subscribe({ + next: (success: any)=>{ + console.log("success") + this.errorText = "" + this.successText = JSON.stringify(success, null, 4) + }, + complete: () => console.log("Sent token in header"), + error: (error: HttpErrorResponse) => { + this.successText = "" + this.errorText = error.statusText || "Unsuccessful" + console.error('error:', error) + } }) } diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.html b/frontend/src/app/send-jwt4/send-jwt4.component.html index 602a946..1971a31 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.html +++ b/frontend/src/app/send-jwt4/send-jwt4.component.html @@ -4,9 +4,14 @@

{{ "send-jwt4.introduction" | transloco }}

-
- - {{ "send-jwt4.authenticated" | transloco | uppercase }} +
+ + {{ successText }} +
+ +
+ +{{ errorText | transloco | uppercase }}
diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.ts b/frontend/src/app/send-jwt4/send-jwt4.component.ts index 3c99975..ba2b78f 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.ts +++ b/frontend/src/app/send-jwt4/send-jwt4.component.ts @@ -1,4 +1,4 @@ -import { HttpHeaders } from '@angular/common/http'; +import { HttpErrorResponse, HttpHeaders } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { DemoService } from '../shared/services/demo.service'; @@ -11,6 +11,9 @@ import { StepService } from '../shared/services/step.service'; }) export class SendJwt4Component implements OnInit { + successText = ""; + errorText = ""; + constructor( private router : Router, private demoService: DemoService, @@ -27,8 +30,18 @@ export class SendJwt4Component implements OnInit { } getProtectedUserData(){ - this.demoService.remote().webCookies().subscribe((success)=>{ - console.log(success) + this.demoService.remote().webCookies().subscribe({ + next: (success: any)=>{ + console.log("success") + this.errorText = "" + this.successText = JSON.stringify(success, null, 4) + }, + complete: () => console.log("Sent token in header"), + error: (error: HttpErrorResponse) => { + this.successText = "" + this.errorText = error.statusText || "Unsuccessful" + console.error('error:', error) + } }) } diff --git a/frontend/src/app/shared/services/demo.service.ts b/frontend/src/app/shared/services/demo.service.ts index 3bc34b6..f25c3f7 100644 --- a/frontend/src/app/shared/services/demo.service.ts +++ b/frontend/src/app/shared/services/demo.service.ts @@ -22,18 +22,18 @@ export class DemoService { } let httpRequest = this.http return { - getFromRequestParameter(accessToken: any): Observable { + sendTokenViaRequestParam(accessToken: any): Observable { let url = REMOTE_SERVER+ENDPOINTS.protected let params = { access_token: accessToken } return httpRequest.get(url, {params: params}); }, - postFromBody(body: any): Observable { + sendTokenViaWebFormBody(body: any): Observable { let url = REMOTE_SERVER+ENDPOINTS.webForm - return httpRequest.post(url, body.access_token); + return httpRequest.post(url, body); }, - getFromRequestHeader(headers: any): Observable { + sendTokenViaRequestHeader(headers: any): Observable { let url = REMOTE_SERVER+ENDPOINTS.bearer return httpRequest.get(url, {headers: headers}); }, @@ -41,7 +41,7 @@ export class DemoService { let url = REMOTE_SERVER+ENDPOINTS.login return httpRequest.post(url, body); }, - webCookies(): Observable { + sendTokenViaWebCookies(): Observable { let url = REMOTE_SERVER+ENDPOINTS.webCookies return httpRequest.get(url); }, diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 8f7a358..fee9533 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -128,22 +128,22 @@ "introduction": "2. Send JWT to backend with request to access to resources", "ways": "There are 4 ways you can send JWT to backend", "authenticated": "you have been successfully authenticated", - "request": "In request parameter", - "request1": "send jwt token in request parameter", - "request2": "In this request, we sent token via request URI parameters", + "request": "Send JWT in request parameter", + "request1": "Send jwt token in request parameter", + "request2": "In this request, we will send token via request URI parameters", "queryParameter": "Read about standards to follow while sending token via URI Query Parameter", "secureWay": "Let's learn about more secure ways to send the token to the authorization server.", "body": "Next: Send token in form body", - "code": "GET /demo/protected-endpoint?access_token=mF_9.B5f-4.1JqM HTTP/1.1" + "code": "GET /demo/protected-endpoint?access_token=mF_9B5f-4.1JqM HTTP/1.1" }, "send-jwt2": { "introduction": "2. Send JWT to backend with request to access to resources", "ways": "There are 4 ways you can send JWT to backend", "authenticated": "you have been successfully authenticated", - "request": "In form body", - "request1": "Click to Send Token in form body", - "request2": "In this request, we sent token via request URI parameters", + "request": "Send token in form body", + "request1": "Click to send token in form body", + "request2": "In this request, we will send token via form body", "inputParameter": "Input parameter Name: access_token", "contentType": "Content-Type: application/x-www-form-urlencoded", "queryParameter": "Read about standards to send token via form-encoded body parameters", @@ -155,25 +155,25 @@ "introduction": "2. Send JWT to backend with request to access to resources", "ways": "There are 4 ways you can send JWT to backend", "authenticated": "you have been successfully authenticated", - "request": "In request header", + "request": "Send token in request header", "request1": "Click to Send Token in form body", - "request2": "In this request, we sent token via request URI parameters", + "request2": "In this request, we will send token via request headers", "invalidRequest": "Invalid_request(400-Bad request)", "invalidToken": "Invalid_token(401-unauthorized)", "scope": "Insufficient_scope(403-Forbidden)", "errorCodes": "Error Codes:", "queryParameter": "Read about standards to send token via headers", - "body": "Next: Sending token in cookies", - "requestHeader": "send token to request header", + "body": "Next: Sending token via cookies", + "requestHeader": "Send token via request header", "openBracket": "{", "closeBracket": "}" }, "send-jwt4": { "introduction": "2. Send JWT to backend with request to access to resources", "ways": "There are 4 ways you can send JWT to backend", - "request": "In cookies", - "request1": "Anything stored in cookies is sent with the request by default. So there's nothing special that you need to do in this case.", - "request2": "Lets see the complete authentication workflow in action using cookies", + "request": "Send token via cookies", + "request1": "Anything stored in cookies is sent with the request by default. So there's nothing special that you need to do in this case as long as the backend server had set the cookie header when it generted the token.", + "request2": "Let's see the complete authentication workflow in action using cookies", "step1": "Login to get the token", "step2": "Get protected user data", "step3" : "User data link accessible via token in authorization header with fall back to cookies", diff --git a/frontend/src/assets/images/icon-error.svg b/frontend/src/assets/images/icon-error.svg new file mode 100644 index 0000000..707cbe2 --- /dev/null +++ b/frontend/src/assets/images/icon-error.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/routes/demo.js b/routes/demo.js index 103ad4d..7b73188 100644 --- a/routes/demo.js +++ b/routes/demo.js @@ -14,6 +14,13 @@ const upload = multer(); router.get('/protected', DemoAuthService.isAuthenticated, function(req, res) { var token = req.query.access_token; + if(req.wantsJson){ + return res.status(200).send({ + token: token, + statusText: "User authenticated successfully", + statusCode: "Authentication_Success" + }) + } res.render('demo/home', { token: token, statusText: "User authenticated successfully", @@ -24,6 +31,13 @@ router.get('/protected', DemoAuthService.isAuthenticated, function(req, res) { router.post('/protected/web-form', DemoAuthService.isAuthenticated, function(req, res) { console.log(req.get('Content-Type')); var token = req.body.access_token; + if(req.wantsJson){ + return res.status(200).send({ + token: token, + statusText: "User authenticated successfully", + statusCode: "Authentication_Success" + }) + } res.render('demo/tokenInBody', { token: token, statusText: "User authenticated successfully", diff --git a/services/DemoAuthService.js b/services/DemoAuthService.js index 2b35d60..06fe5e0 100644 --- a/services/DemoAuthService.js +++ b/services/DemoAuthService.js @@ -48,6 +48,12 @@ function isAuthenticated(req, res, next) { } JwtService.verifyToken(tokenExchange.token, function(err, decodedToken){ if (err) { + if(req.wantsJson){ + return res.status(401).send({ + statusText: "Authentication failed. Token not verified.", + statusCode: "Authentication_Failure" + }) + } return res.status(401).send(` Not Authenticated!
${JSON.stringify(err)}
Go Home