Skip to main content

Integrating with VueJS

This will explain 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

  2. Install dependencies:

    npm install

  3. 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.

  2. 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.