Angular Oauth2 Integration with AuthAction

AuthAction is a powerful authentication and authorization platform that offers a range of features, including support for single-page applications (SPA) and machine-to-machine (M2M) applications. It provides an easy-to-use interface for managing users,…


This content originally appeared on DEV Community and was authored by AuthAction

AuthAction is a powerful authentication and authorization platform that offers a range of features, including support for single-page applications (SPA) and machine-to-machine (M2M) applications. It provides an easy-to-use interface for managing users, roles, and organizations, and supports OAuth2 and social logins. Best of all, AuthAction is scalable, allowing up to 50,000 monthly active users for free. Whether you're developing an app for a startup or a large enterprise, AuthAction provides a flexible and secure solution for your authentication needs.

In this blog, we'll explore how to integrate OAuth2 authentication into a Angular application using AuthAction with angular-oauth2-oidc library. This step-by-step guide will show you how to configure authentication, handle login and logout, and ensure a seamless user experience.

Overview

This application showcases how to configure and handle authentication and logout using Authaction’s OAuth2 service. The setup includes:

  • Redirecting users to the login page.
  • Handling successful authentication and displaying user information.
  • Logging out users and redirecting them to the specified logout URL.

Prerequisites

Before using this application, ensure you have:

  1. Node.js and npm installed: You can download and install them from nodejs.org.

  2. Authaction OAuth2 credentials: You will need to have the tenantDomain, clientId, and relevant URIs from your Authaction setup.

Installation

  1. Clone the repository (if applicable): 
   git clone git@github.com:authaction/authaction-angular-example.git
   cd authaction-angular-example
  1. Install dependencies: 
   npm install
  1. Configure your Authaction credentials:

Edit src/config.json and replace the placeholders with your Authaction OAuth2 details:

   {
     "tenantDomain": "your-tenant-domain",
     "clientId": "your-client-id",
     "redirectUri": "http://localhost:4200/",
     "logoutRedirectUri": "http://localhost:4200/"
   }

Usage

  1. Start the development server: 
   npm start

This will start the Angular application on http://localhost:4200.

  1. Testing Authentication:
  • Open your browser and navigate to http://localhost:4200.
  • Click the "Login" button to be redirected to the Authaction login page.
  • After successful login, you will be redirected back to the application with a welcome message showing your email and a "Logout" button.
  • Click the "Logout" button to be logged out and redirected to the specified logout URL.

Code Explanation

Configuration (src/index.js)

  • OAuthService Setup:
    • Configures the OAuth2 authentication using angular-oauth2-oidc.
    • Sets up issuer, clientId, redirectUri, and postLogoutRedirectUri based on the credentials from config.json.

Application Component (src/App.js)

  • Login and Logout Handling:
    • login triggers a redirect to the Authaction login page.
    • logout triggers a redirect to the Authaction logout page.
    • The application conditionally displays a welcome message and logout button if the user is authenticated. Otherwise, it shows a login button.

Common Issues

  • Redirects not working:

    • Ensure that the redirectUri and postLogoutRedirectUri match the URIs configured in your AuthAction application settings.
    • Make sure the application is running on the same port as specified in the redirectUri.

  • Network Errors:

    • Verify that your network allows traffic to the Authaction servers and that there are no firewall rules blocking the OAuth2 redirects.

Conclusion

Integrating OAuth2 authentication into a Angular application using AuthAction and angular-oauth2-oidc is a straightforward process. This example helps streamline the setup, offering developers a robust foundation to build secure applications with minimal effort.

If you run into any issues, double-check your configurations and URIs to ensure everything is set up correctly. Happy coding!

Feel free to leave your thoughts and questions in the comments below!


This content originally appeared on DEV Community and was authored by AuthAction


Print Share Comment Cite Upload Translate Updates
APA

AuthAction | Sciencx (2024-10-21T05:19:17+00:00) Angular Oauth2 Integration with AuthAction. Retrieved from https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/

MLA
" » Angular Oauth2 Integration with AuthAction." AuthAction | Sciencx - Monday October 21, 2024, https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/
HARVARD
AuthAction | Sciencx Monday October 21, 2024 » Angular Oauth2 Integration with AuthAction., viewed ,<https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/>
VANCOUVER
AuthAction | Sciencx - » Angular Oauth2 Integration with AuthAction. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/
CHICAGO
" » Angular Oauth2 Integration with AuthAction." AuthAction | Sciencx - Accessed . https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/
IEEE
" » Angular Oauth2 Integration with AuthAction." AuthAction | Sciencx [Online]. Available: https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/. [Accessed: ]
rf:citation
» Angular Oauth2 Integration with AuthAction | AuthAction | Sciencx | https://www.scien.cx/2024/10/21/angular-oauth2-integration-with-authaction/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts