Add dependency to redirect unauthenticated users to login and add webpages to display error responses. #26

kuries · 2022-06-23T18:02:22Z

Parent: #25

Redirect unauthorized users to /login endpoint.
Add extra web pages to handle HTTP 404 errors and responses from external URL invites.

I added a dependency in the backend which acts as middleware and checks if the request has a valid session ID. If it doesn't, then it returns a "401 unauthorized request" as a response.
To handle this on the client-side I created an Axios interceptor which checks for a 401 error in all the incoming responses. If present, it'll redirect the user to the login page.

Demo pages for 404 and External URL response messages:

error-404.png

External Url invite message.

kuries · 2022-06-27T08:06:24Z

To redirect users on the login page we can do it in two ways.

A simple and easier way is to replace the window URL directly by changing window.location.href. This leads to a full page reload which might be against "SPA" nature.
A little more complex way is to create a custom router and supply a history object to it. This way we can pass this newly created history object to the axios interceptor and directly manipulate the custom router without triggering a full page reload. But this adds some unnecessary code which might possibly break in the future (not sure).
Reference: https://stackoverflow.com/a/70012117

@Half-Shot @Cadair
Can you suggest which might be a good option in the long run?

Half-Shot · 2022-06-27T09:17:51Z

frontend/src/HelperFunctions/customAxios.js

+    if (axios.isAxiosError(er)) {
+      if (er.response) {
+        if (er.response.status == 401) {
+          history.replace("/login");
+        }
+      }
+    }


Saves you a bit of nesting. You can use foo?.bar to say if foo is undefined, don't try to access bar. Very handy for these kinds of logic.

Suggested change

if (axios.isAxiosError(er)) {

if (er.response) {

if (er.response.status == 401) {

history.replace("/login");

}

}

}

if (axios.isAxiosError(er) && er.response?.status == 401) {

history.replace("/login");

}

Done, thanks.

Half-Shot · 2022-06-27T09:18:24Z

frontend/src/HelperFunctions/customAxios.js

+    return response;
+  },
+  function (er) {
+    if (axios.isAxiosError(er)) {


Wonder if this is a good thing to explicitly log, so we know why we've been navigated away?

Half-Shot · 2022-06-27T09:18:40Z

frontend/src/Pages/ExternalUrl.js

+                </div>
+            </div>
+            <div>
+                <img src="https://i.ibb.co/ck1SGFJ/Group.png" />


I spot another cheeky remote asset :p

Half-Shot · 2022-06-27T09:19:17Z

frontend/src/Pages/LoginSuccess.js

+            if(loginToken == null){
+                throw new Error("Invalid login token.");
+            }
+            fetchData();


Always await these.

Suggested change

fetchData();

await fetchData();

…nticate_user` dependency. Unauthenticated users are redirected to login page (full reload of SPA occurs). Sessions return a null value when session_id is not present in redis. Update client-side API calls and backend tests to handle url changes.

These interceptors get triggered on every response and if the status code is 401, the user is redirected to login. All axios imports are replaced with a custom axios instance.

…if logic.

…ired.

Half-Shot

LGTM

kuries changed the title ~~Add additional webpages to handle 404 Error and external url invite response.~~ Additional webpages to handle 404 Error and external url invite response. Jun 23, 2022

kuries changed the title ~~Additional webpages to handle 404 Error and external url invite response.~~ Support for protected routes and Add additional webpages to handle 404 Error and external url invite response. Jun 23, 2022

kuries changed the title ~~Support for protected routes and Add additional webpages to handle 404 Error and external url invite response.~~ Support for protected routes and add additional webpages to handle 404 Error and external url invite response. Jun 23, 2022

kuries marked this pull request as ready for review June 23, 2022 19:29

kuries requested review from Cadair and Half-Shot June 23, 2022 19:29

kuries force-pushed the pages-without-navbar branch 2 times, most recently from 0a92a5b to b7720a9 Compare June 25, 2022 19:33

kuries changed the title ~~Support for protected routes and add additional webpages to handle 404 Error and external url invite response.~~ Add dependency to handle unauthenticated users and add webpages to handle 404 Error and external url invite responses. Jun 25, 2022

kuries force-pushed the pages-without-navbar branch from b7720a9 to 78b5318 Compare June 25, 2022 19:48

kuries changed the title ~~Add dependency to handle unauthenticated users and add webpages to handle 404 Error and external url invite responses.~~ Add dependency to redirect unauthenticated users to login and add webpages to display error responses. Jun 25, 2022

Half-Shot requested changes Jun 27, 2022

View reviewed changes

kuries force-pushed the feature_external-url branch 2 times, most recently from f1cad3b to 992b84b Compare June 27, 2022 12:58

kuries added 8 commits June 27, 2022 18:48

Add error page and create routes without NavBar Header.

1c991c1

Add External Url page in frontend to display messages.

784c190

Fix invalid login token error in login-success page.

0f10d75

Add Custom Router which uses a custom history object from react router.

93cee66

Create custom axios with response interceptors.

4a9c751

These interceptors get triggered on every response and if the status code is 401, the user is redirected to login. All axios imports are replaced with a custom axios instance.

Raise 401 error instead of 302 Redirect when the user is not authorized.

ab268d6

Add local image asset for error pages. Reformat code to avoid nested …

229f001

…if logic.

kuries force-pushed the pages-without-navbar branch from 78b5318 to 229f001 Compare June 27, 2022 13:47

Console log the error received from unauthorized request to server.

29b564d

kuries requested a review from Half-Shot June 27, 2022 14:28

kuries mentioned this pull request Jun 27, 2022

Render webpages on login and use context hooks to manage User Id #28

Merged

Remove type parameter in MatrixApi.

c860ab7

kuries mentioned this pull request Jun 28, 2022

User authentication for GitHub via OAuth 2.0 #29

Merged

5 tasks

Return status code 401 when the open id token is incorrect or has exp…

50d9f7a

…ired.

kuries mentioned this pull request Jul 4, 2022

Workflow for authenticating with OpenID token on the backend. #16

Merged

Half-Shot approved these changes Jul 6, 2022

View reviewed changes

kuries changed the base branch from feature_external-url to main July 15, 2022 18:18

Cadair approved these changes Jul 24, 2022

View reviewed changes

Cadair merged commit 4f3dac7 into main Jul 24, 2022

kuries deleted the pages-without-navbar branch September 7, 2022 15:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dependency to redirect unauthenticated users to login and add webpages to display error responses. #26

Add dependency to redirect unauthenticated users to login and add webpages to display error responses. #26

kuries commented Jun 23, 2022 •

edited

kuries commented Jun 27, 2022

Half-Shot Jun 27, 2022

kuries Jun 27, 2022 •

edited

Half-Shot Jun 27, 2022

Half-Shot Jun 27, 2022

kuries Jun 27, 2022

Half-Shot Jun 27, 2022

Half-Shot left a comment

Add dependency to redirect unauthenticated users to login and add webpages to display error responses. #26

Add dependency to redirect unauthenticated users to login and add webpages to display error responses. #26

Conversation

kuries commented Jun 23, 2022 • edited

kuries commented Jun 27, 2022

Half-Shot Jun 27, 2022

Choose a reason for hiding this comment

kuries Jun 27, 2022 • edited

Choose a reason for hiding this comment

Half-Shot Jun 27, 2022

Choose a reason for hiding this comment

Half-Shot Jun 27, 2022

Choose a reason for hiding this comment

kuries Jun 27, 2022

Choose a reason for hiding this comment

Half-Shot Jun 27, 2022

Choose a reason for hiding this comment

Half-Shot left a comment

Choose a reason for hiding this comment

kuries commented Jun 23, 2022 •

edited

kuries Jun 27, 2022 •

edited