I am working on the Frontend of a Project and I am using the latest Blazor Web App InteractiveAuto after using InteractiveServer caused me a problem. To begin with, I created a login page, that take a user's username, password and a few other parameters and make a login request via api call '/auth/signin' to the backend which is being developed by our backend developer. Presumably, he did the authentication and send me back with a Set-Cookie. Okay, here is when the problem start.
Because I initially used Blazor Web App InteractiveServer, I came to knew that all the request are made using signalr and not the browser, and because of that even after receiving his Set-Cookie, the cookie isn't displayed on the application tab of the developer's tools. Which leaves me with no other choice but to use HttpContextAccessor and manually extract the cookie and store it in a class, and add in into every subsequent request I make to the backend. Here is where I start to not understand what should be the next step.
Because according to my backend developer, I need to authenticate the user based on the presence of cookie, and once the user is authenticated, he can access an [Authorize] tagged page. I tried a few times but failed to implement this because the manual method of extracting the cookie is returning cookie = null even after I received the Set-Cookie and even after the cookie are included in subsequent headers. Maybe my method was wrong, I'm not sure. Which brings me to another method, that is to try and use InteractiveAuto instead.
InteractiveAuto
Now, when I work with InteractiveAuto method, I created the Login.razor page on the client side components, and included the AuthenticationService class for making login request there too. That way, I can let the browser to make the request and after successful request, I get the Set-Cookie.
The browser also stores the Cookie in the application tab and automatically add it into subsequent request.
Here is where I stuck again, as per told by my Backend Developer, I need to authenticate the user after getting the Set-Cookie and before navigating the authenticated user to the homepage tagged [Authorize]. So yeah. I tried authenticating again.
First method, I use JavaScript to check for presence of cookie on the browser and consider a user authenticated, but it didn't work.
Second method, is I make another call to the backend this time the call is '/verify_session'. and in return, the backend sends me a success code 200. when I get the success code, consider the user authenticated. I tried this method, and debug, I managed to get the user is authenticated, but still when I try to navigate the user to a tagged [Authorize] page, it still failed.
I tried so many different methods to authenticate user and navigate him to an authorize page. And still failed. Which makes me think, am I doing the right procedure here? Is authenticating a user my job or is it already done by the backend when I make the login request and he sends me back a Set-Cookie. What is actually the next step that I, as a Frontend dev need to do after getting the Set-Cookie from him? Is it User-session, is it state management, is it really authenticating and authorize, or is it something else?
I am looking to ensure that my approach is secure and follows best practices for a production environment.
Apparently, the answer to my problem is on the [Authorize] tag itself. Instead of using the tag itself, I used
<AuthorizedView>
<Authorize>
</Authorize>
<AuthorizedView>
This method did solve the issue I was having trouble with for the next step after login. Thanks for contributing