User Profile Info, Protected Routes, and Calling APIs
In part 1 of this series, we talked about setting up authentication in your Angular app using JSON Web Tokens (JWT). In part 2, we’ll cover how to manage user profile information, create protected routes, and make authenticated API calls.
User Profile Info
After a user logs in, you’ll want to display their profile information in the app. This typically includes their name, email, profile picture, and any other relevant details. You can retrieve this information from the JWT payload, which is typically stored in local storage or a cookie after the user logs in. You can then decode the JWT and use the user information to populate the profile page in your app.
Protected Routes
Once a user is authenticated, you’ll want to restrict access to certain parts of your app to only authenticated users. You can achieve this by creating protected routes using Angular’s built-in guard functionality. Guards can be used to check if a user is authenticated before allowing them to access a particular route. If the user is not authenticated, you can redirect them to the login page or show an access denied message.
Calling APIs
Once a user is authenticated, you may need to make authenticated API calls to fetch or update user data, or to perform other actions on behalf of the user. You can include the JWT in the authorization header of your API calls to verify the user’s identity and permissions. This ensures that only authenticated users can access specific API endpoints and perform certain actions.
By managing user profile information, creating protected routes, and making authenticated API calls, you can build a secure and user-friendly authentication system in your Angular app. Stay tuned for part 3, where we’ll cover session management and token renewal.
This is very helpful, thank you! I would like to know a bit more about accessing the management api from an angular application. As I understand it, there are limitations on which fields can be updated by an SPA. I understand the reasons why, I'm just not sure how to handle the problem. What if the users of my frontend want to change their name? Do I set up an backend express server that handles the requests as a "middle man" and passes them to the management api? I believe this is a common use case but I'm not sure if this would be the way to go. Thanks for any advice here
This was quite good! It helped get up to speed quicker than the docs
Thank you for sharing this, it is quite useful for those like me beginning the road into this technology