Add a single-page application (SPA)

Integrate application for user login and access control.

In your workspace, select Applications > Clients > Create client.
Provide a name for your application, select the Single Page type, and click Create.
Configure the redirect URI for your application.

The redirect URI defines where to send users after they complete authentication and consent.

To learn more, see OAuth Redirect URI
Copy or download the client application configuration (client ID most importantly) and add it to your application code. Use any OAuth library you want!

React.js with cloudentity-auth-js

// generate react app using yarn create react-app
   // install dependencies using yarn install
   // add cloudentity auth library (https://github.com/cloudentity/cloudentity-auth-js) using yarn add @cloudentity/auth
   // go to src/App.js
   // import the library
   import CloudentityAuth from '@cloudentity/auth';

   import logo from './logo.svg';
   import './App.css';
   import {useEffect, useState} from "react";

   // initialize the library
   const cloudentity = new CloudentityAuth({
     responseType: ['code'], // required, array with a list of OAuth 2 respose types
     domain: 'postmance.eu.connect.secureauth.com',
     tenantId: 'postmance',
     authorizationServerId: 'docs',
     clientId: '3ad9f3f1235242689f661d0c303183d0',
     redirectUri: "http://localhost:3000/",
     userInfoUri: 'https://postmance.eu.connect.secureauth.com/postmance/docs/userinfo',
     scopes: ['profile', 'email', 'openid']
   });

   function App() {

     // create state for the user info
     const [user, setUser] = useState({})

     useEffect( () => {
       // check if user is logged in
       cloudentity.getAuth().then(
           function (authResponse) {
             // set authenticated state in client app, use oauth data, etc.
             // access token (and id token, if present) are automatically set in browser's local storage,
             // so there may be no need for the client app to handle the response data, unless there are custom requirements
             console.log('success', authResponse);
             cloudentity.userInfo().then(function (userinfoResponse) {
               console.log('userinfo', userinfoResponse);
               // store user info in local state
               setUser(userinfoResponse);
             })
           },
           function (errorResponse) {
             // user is not authorized
             // set unauthenticated state, redirect to login, etc.
             console.log('failure', errorResponse);
             cloudentity.authorize();
           }
       );
     }, [])

     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <p>
             Hello {user.name}!
           </p>
           <a
             className="App-link"
             href="https://reactjs.org"
             target="_blank"
             rel="noopener noreferrer"
           >
             Learn React
           </a>
         </header>
       </div>
     );
   }

   export default App;

Vue.js cloudentity-auth-js

 // generate vue app using yarn create vue
   // install dependencies using yarn install
   // add cloudentity auth library (https://github.com/cloudentity/cloudentity-auth-js) using yarn add @cloudentity/auth
   // go to src/router/index.js
   // import the library
   import CloudentityAuth from '@cloudentity/auth'
   // after router initialization add

   const cloudentity = new CloudentityAuth({
       responseType: ['code'], // required, array with a list of OAuth 2 respose types
       domain: 'postmance.eu.connect.secureauth.com',
       tenantId: 'postmance',
       authorizationServerId: 'docs',
       clientId: '3ad9f3f1235242689f661d0c303183d0',
       redirectUri: "http://localhost:5173/",
       userInfoUri: 'https://postmance.eu.connect.secureauth.com/postmance/docs/userinfo',
       scopes: ['profile', 'email', 'openid']
   });

   router.beforeEach((to, from, next) => {
       cloudentity.getAuth().then(
           function (authResponse) {
               // set authenticated state in client app, use oauth data, etc.
               // access token (and id token, if present) are automatically set in browser's local storage,
               // so there may be no need for the client app to handle the response data, unless there are custom requirements
               console.log('success', authResponse);
               cloudentity.userInfo().then(function (userinfoResponse) {
                   console.log('userinfo', userinfoResponse);
                   // do something with the userinfo response
                   next();
               })
           },
           function (errorResponse) {
               // user is not authorized
               // set unauthenticated state, redirect to login, etc.
               console.log('failure', errorResponse);
               cloudentity.authorize();
           }
       );
   })

Access your application and try the sign in.

Next Steps​

Next Steps