Preflight (No running Backend) Error
Indication of Preflight Error
A preflight error occurs during cross-origin requests (CORS) when a preflight request fails. Either:
- The server does not respond with the appropriate CORS headers.
- The server rejects the preflight request due to incorrect CORS configuration.
- There is a network issue preventing the preflight request from reaching the server.
In this case, the third issue is present (because the backend is not running locally, the preflight request does not even reach the serve - as its not up)
Further Invesitgation into the error - in Sources
In sources, the source of the error is more clearly indicated. The error might indicate a failure to make the network request to http://localhost:8085/authenticate. This could happen if the server is not running or if there is an issue with the network connection, which is the case currently. However, let us continue investigating using debugging mode to confirm .
Debug
First in debug mode I will test the ability to accept the use input of login information as an array. (I know already this is not the issue, but if it were an issue I would not be notified. For this reason I added a breakpoint here. Additionally, this step is important to come BEFORE the server is called)
After stepping over, it is clear that the input of the user is saved as expected.
In the next step over, the breakpoint set at the .catch for the js request is highlighted.
The error message is in the format :
console.error('Error during login:', error);
If we check in the console, the error is present as expected along with a network error :
Fix
With the POST network error coupled with the console response error, it is clear that the issue lies in server connectivity. I went to check and my server was not even running! Once server ws started, error was resolved :
Interestingly enough, I found a new issue. While my login was successful (as shown by the breakpoints and a complete screenshot I will show below), there is a new issue... Apparently in future chrome versions: setting third-party cookies will be blocked. This behavior protects user data from cross-site tracking. Interesting to see how to navigate this, and I plan to read more about it in the article provided : LINK
LOGIN SUCCESSFUL REDIRECT TO AUTHORIZED PAGE:
Unathenticated Error
Now I want to explore a new error. What happens if somebody tries to access the authenticated page without properlly logging in. What will they see. Should I make a redirect to login page (probably!). This is what I plan to investigate on this page.
Start Backend on Debug Mode
Cookies Cleared on Authenticate Page
Error in Console with Cleared Cookies
Sources
I added breakpoint to fetch, inside .then, inside .fetch
Run frontend, screen capture break at fetch while examining Body
Press play on frontend, observe stop inside of backend
No Cookies error !
Press step over on backend until you have obtained data from database, screen capture HashMap or other data Object, Step in until you see data, screen capture capturing break point and Data.
Further Application
For my LinkedIn-type application, leveraging the login debug functionality can greatly enhance the user authentication and authorization process. Since the LinkedIn backend is in Python, integrating the login debug feature involves strategically placing breakpoints within the Python codebase to intercept and inspect the authentication flow. By carefully analyzing the request/response cycle at crucial authentication endpoints, such as user login and token generation, developers can gain valuable insights into the authentication process's efficiency, security, and potential vulnerabilities. This debug capability allows for thorough testing and validation of various authentication scenarios, including successful logins, incorrect credentials, expired tokens, and unauthorized access attempts. Moreover, by utilizing logging frameworks or custom logging mechanisms, developers can track and log detailed information about authentication attempts, facilitating comprehensive auditing and troubleshooting. Ultimately, integrating login debug functionality into the LinkedIn-type application's backend empowers developers to ensure robust security measures, streamline user authentication workflows, and deliver a seamless and secure user experience.
I still have to do the frontend, so testing debug doesn't exactly make sense yet. However here is what I have worked on so far :
Preflight (No running Backend) Error
Indication of Preflight Error
A preflight error occurs during cross-origin requests (CORS) when a preflight request fails. Either:
In this case, the third issue is present (because the backend is not running locally, the preflight request does not even reach the serve - as its not up)
Further Invesitgation into the error - in Sources
In sources, the source of the error is more clearly indicated. The error might indicate a failure to make the network request to http://localhost:8085/authenticate. This could happen if the server is not running or if there is an issue with the network connection, which is the case currently. However, let us continue investigating using debugging mode to confirm .
Debug
First in debug mode I will test the ability to accept the use input of login information as an array. (I know already this is not the issue, but if it were an issue I would not be notified. For this reason I added a breakpoint here. Additionally, this step is important to come BEFORE the server is called)
After stepping over, it is clear that the input of the user is saved as expected.
In the next step over, the breakpoint set at the .catch for the js request is highlighted.
The error message is in the format :
console.error('Error during login:', error);If we check in the console, the error is present as expected along with a network error :
Fix
With the POST network error coupled with the console response error, it is clear that the issue lies in server connectivity. I went to check and my server was not even running! Once server ws started, error was resolved :
Interestingly enough, I found a new issue. While my login was successful (as shown by the breakpoints and a complete screenshot I will show below), there is a new issue... Apparently in future chrome versions: setting third-party cookies will be blocked. This behavior protects user data from cross-site tracking. Interesting to see how to navigate this, and I plan to read more about it in the article provided : LINK
LOGIN SUCCESSFUL REDIRECT TO AUTHORIZED PAGE:
Unathenticated Error
Now I want to explore a new error. What happens if somebody tries to access the authenticated page without properlly logging in. What will they see. Should I make a redirect to login page (probably!). This is what I plan to investigate on this page.
Start Backend on Debug Mode
Cookies Cleared on Authenticate Page
Error in Console with Cleared Cookies
Sources
I added breakpoint to fetch, inside .then, inside .fetch
Run frontend, screen capture break at fetch while examining Body
Press play on frontend, observe stop inside of backend
No Cookies error !
Press step over on backend until you have obtained data from database, screen capture HashMap or other data Object, Step in until you see data, screen capture capturing break point and Data.
Further Application
For my LinkedIn-type application, leveraging the login debug functionality can greatly enhance the user authentication and authorization process. Since the LinkedIn backend is in Python, integrating the login debug feature involves strategically placing breakpoints within the Python codebase to intercept and inspect the authentication flow. By carefully analyzing the request/response cycle at crucial authentication endpoints, such as user login and token generation, developers can gain valuable insights into the authentication process's efficiency, security, and potential vulnerabilities. This debug capability allows for thorough testing and validation of various authentication scenarios, including successful logins, incorrect credentials, expired tokens, and unauthorized access attempts. Moreover, by utilizing logging frameworks or custom logging mechanisms, developers can track and log detailed information about authentication attempts, facilitating comprehensive auditing and troubleshooting. Ultimately, integrating login debug functionality into the LinkedIn-type application's backend empowers developers to ensure robust security measures, streamline user authentication workflows, and deliver a seamless and secure user experience.
I still have to do the frontend, so testing debug doesn't exactly make sense yet. However here is what I have worked on so far :