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 cloudentity-auth-js
// Install dependencies: yarn add @cloudentity/auth
import CloudentityAuth from '@cloudentity/auth';
import {useEffect, useState} from "react";

// Initialize authentication
const cloudentity = new CloudentityAuth({
  responseType: ['code'],
  domain: 'your-tenant.region.connect.secureauth.com',
  tenantId: 'your-tenant',
  authorizationServerId: 'your-workspace',
  clientId: 'paste-your-client-id-here',
  redirectUri: "http://localhost:3000/",
  userInfoUri: 'https://your-tenant.region.connect.secureauth.com/your-tenant/your-workspace/userinfo',
  scopes: ['profile', 'email', 'openid']
});

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

  useEffect( () => {
    cloudentity.getAuth().then(
      function (authResponse) {
        console.log('User authenticated', authResponse);
        cloudentity.userInfo().then(function (userinfoResponse) {
          setUser(userinfoResponse);
        })
      },
      function (errorResponse) {
        console.log('Authentication required', errorResponse);
        cloudentity.authorize();
      }
    );
  }, [])

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

export default App;
Example: Vue.js with cloudentity-auth-js
// Install dependencies: yarn add @cloudentity/auth
import CloudentityAuth from '@cloudentity/auth'

const cloudentity = new CloudentityAuth({
  responseType: ['code'],
  domain: 'your-tenant.region.connect.secureauth.com',
  tenantId: 'your-tenant',
  authorizationServerId: 'your-workspace',
  clientId: 'paste-your-client-id-here',
  redirectUri: "http://localhost:5173/",
  userInfoUri: 'https://your-tenant.region.connect.secureauth.com/your-tenant/your-workspace/userinfo',
  scopes: ['profile', 'email', 'openid']
});

router.beforeEach((to, from, next) => {
  cloudentity.getAuth().then(
    function (authResponse) {
      console.log('User authenticated', authResponse);
      cloudentity.userInfo().then(function (userinfoResponse) {
        next();
      })
    },
    function (errorResponse) {
      console.log('Authentication required', errorResponse);
      cloudentity.authorize();
    }
  );
})

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​