Skip to main content

Add a single-page application (SPA)

Add a single-page application to enable user authentication through SecureAuth.

Before you begin​

You'll need:

  • Access to your workspace in SecureAuth
  • The redirect URI where users should land after logging in (your application's callback URL)

Add the application​

  1. In your workspace, select Applications > Clients > Create client.

  2. Enter a name for your application, select the Single Page type, and click Create.

    Create single-page application

  3. Configure the Redirect URI for your application.

    The redirect URI is the URL where SecureAuth sends users after they log in. This must match the callback URL configured in your application code.

    Configure redirect URI

  4. Copy the Client ID and save the configuration.

    You'll need the Client ID to connect your application code to SecureAuth.

    Copy client ID

Integrate with your application​

After creating the client in SecureAuth, integrate it with your application code using an OAuth/OIDC library.

Example: React.js with oidc-client-ts
// Install dependencies: yarn add oidc-client-ts
import { UserManager } from 'oidc-client-ts';
import { useEffect, useState } from "react";

// Initialize authentication
const userManager = new UserManager({
  authority: 'https://your-tenant.region.connect.secureauth.com/your-tenant/your-workspace',
  client_id: 'paste-your-client-id-here',
  redirect_uri: 'http://localhost:3000/',
  response_type: 'code',
  scope: 'openid profile email',
});

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const handleAuth = async () => {
      if (window.location.search.includes('code=')) {
        const user = await userManager.signinRedirectCallback();
        setUser(user);
        window.history.replaceState({}, document.title, window.location.pathname);
      } else {
        const user = await userManager.getUser();
        if (user && !user.expired) {
          setUser(user);
        } else {
          userManager.signinRedirect();
        }
      }
    };
    handleAuth();
  }, []);

  return (
    <div>
      <h1>Hello {user?.profile?.name}!</h1>
    </div>
  );
}

export default App;
Example: Vue.js with oidc-client-ts
// Install dependencies: yarn add oidc-client-ts
import { UserManager } from 'oidc-client-ts';

const userManager = new UserManager({
  authority: 'https://your-tenant.region.connect.secureauth.com/your-tenant/your-workspace',
  client_id: 'paste-your-client-id-here',
  redirect_uri: 'http://localhost:5173/',
  response_type: 'code',
  scope: 'openid profile email',
});

router.beforeEach(async (to, from, next) => {
  if (window.location.search.includes('code=')) {
    await userManager.signinRedirectCallback();
    next();
  } else {
    const user = await userManager.getUser();
    if (user && !user.expired) {
      next();
    } else {
      userManager.signinRedirect();
    }
  }
});

You can use any OAuth/OIDC library that supports the Authorization Code flow with PKCE.

Test the integration​

  1. Start your application.
  2. Navigate to the login page.
  3. Verify that users are redirected to SecureAuth for authentication.
  4. After logging in, confirm users are redirected back to your application.

Next steps​