Vuejs 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, 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 Vuejs application using AuthAction with oidc-client-ts 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-vuejs-example.git
   cd authaction-vuejs-example

1. Install dependencies:

   npm install

1. Configure your AuthAction credentials:

   configure your AuthAction OAuth2 details using environment variables in your .env file
   

   VITE_AUTHACTION_TENANT_DOMAIN=your-authaction-tenant-domain
   VITE_AUTHACTION_CLIENT_ID=your-authaction-app-clientid
   VITE_AUTHACTION_REDIRECT_URI=http://localhost:3000/callback
   VITE_AUTHACTION_LOGOUT_REDIRECT_URI=http://localhost:3000/logout-callback

Usage

1. Start the development server:

   npm run dev

This will start the React application on http://localhost:5173.

1. Testing Authentication:

• Open your browser and navigate to http://localhost:5173.
• 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)

• AuthService Setup:
  • Configures the OAuth2 authentication using oidc-client-ts.
  • Sets up authority, client_id, redirect_uri, and post_logout_redirect_uri based on the credentials from .env.
  • onSigninCallback handles the cleanup of the URL after the sign-in callback.

Application Component (src/components/TheWelcome.vue)

• Login and Logout Handling:
  • handleLogin triggers a redirect to the Authaction login page.
  • handleLogout 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 logoutRedirectUri 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 Vuejs application using AuthAction and oidc-client-ts 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!