Integrating with Remix

This guide explains how to integrate OAuth2 authentication into a Remix application using AuthAction with remix-auth and remix-auth-oauth2.

Example Repository: For a complete working example, check out our example repository.

Overview

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

• OAuth2 login flow using remix-auth with remix-auth-oauth2 strategy
• Secure server-side session management with encrypted cookies
• Protected routes using loader-based auth checks
• Logout with AuthAction’s OIDC logout flow

Prerequisites

Before using this application, ensure you have:

1. Node.js 18+: Download from nodejs.org
2. AuthAction OAuth2 credentials: You will need the tenantDomain, clientId, clientSecret, and configured redirect URIs from your AuthAction setup.

Installation

1. Clone the repository:

   git clone git@github.com:authaction/authaction-remix-example.git
   cd authaction-remix-example

2. Install dependencies:

   npm install

3. Configure your AuthAction credentials:

   Create a .env file in the root of your project:

   AUTHACTION_TENANT_DOMAIN=your-authaction-tenant-domain
   AUTHACTION_CLIENT_ID=your-authaction-client-id
   AUTHACTION_CLIENT_SECRET=your-authaction-client-secret
   AUTHACTION_REDIRECT_URI=http://localhost:5173/auth/callback
   AUTHACTION_LOGOUT_REDIRECT_URI=http://localhost:5173
   SESSION_SECRET=your-secure-random-string

4. Configure redirect URIs in the AuthAction dashboard:

   • Login redirect URI: http://localhost:5173/auth/callback
   • Logout redirect URI: http://localhost:5173

Usage

1. Start the development server:

   npm run dev

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

2. Testing Authentication:

   • Navigate to http://localhost:5173 and click Login with AuthAction.
   • After login you are redirected to /dashboard with your name and email shown.
   • Click Logout to destroy the session and return to the home page.

Code Explanation

Session Storage

app/session.server.ts — Creates an encrypted cookie-based session storage using SESSION_SECRET.

Authenticator

app/auth.server.ts — Sets up remix-auth with OAuth2Strategy pointed at AuthAction’s authorization and token endpoints. After token exchange, fetches the user profile from the userinfo endpoint and stores it in the session.

Login Route

app/routes/auth.login.tsx — An action route that triggers the OAuth2 redirect to AuthAction’s authorization endpoint.

Callback Route

app/routes/auth.callback.tsx — A loader route that completes the OAuth2 flow — exchanges the code for tokens, fetches the user, and redirects to /dashboard.

Logout Route

app/routes/auth.logout.tsx — An action route that destroys the session cookie and redirects to AuthAction’s OIDC logout endpoint.

Protected Route

app/routes/dashboard.tsx — Loader calls authenticator.isAuthenticated() and redirects to / if no session is found.

Common Issues

• Redirects not working: Verify AUTHACTION_REDIRECT_URI matches exactly what is configured in the AuthAction dashboard
• Session issues: Ensure SESSION_SECRET is a long, random string (32+ characters)
• Network errors: Verify your app can reach https://{AUTHACTION_TENANT_DOMAIN}/oauth2/token