How to manage user authentication in Angular 4 with an external backend login?

I’m developing an Angular 4 application that requires a specific user authentication approach. Our backend developers have created a Drupal website where users log in first. Once they log in, they’re redirected to the Angular 4 dashboard.

The issue I face is that I need to confirm if these users are authenticated before they can access the dashboard, but the actual login happens outside of my Angular app. I don’t have a login section or authentication features in place within Angular.

What’s the best method to approach this situation? How can I ensure that users coming from the Drupal backend are authenticated and allowed access to the dashboard? I need to recognize them as already logged-in users without requiring them to log in again.

Any advice on setting up this authentication process would be greatly appreciated.

Interesting setup! Are you passing session data or cookies between Drupal and Angular? Your backend could set a secure cookie that Angular reads to verify auth status. What happens if someone hits the dashboard directly without going through Drupal first?

To manage user authentication in your Angular 4 application with an external backend, consider implementing a token-based authentication system. Configure your Drupal backend to generate and send an authentication token as a URL parameter during the redirect to your Angular dashboard. In your Angular app, upon loading, capture this token and validate it via your backend API. To enhance security, implement an authentication guard that checks the token’s validity before granting access to the dashboard. Additionally, ensure that the valid token is stored securely, either in local or session storage, for future API requests. It’s also crucial to handle token expiration with a refresh strategy and to redirect unauthorized access attempts appropriately.

have you thought about using JWT? drupal could send a jwt token in the url during the redirect to angular. then your angular app would catch it right away and save it for later api calls. just make sure to validate it on the server for every request.