How-tos

3 mins read

Adding Single Page Applications (SPAs)

Integrate application for user login and access control.

  1. Select Applications » Clients » Create client in the selected workspace.

  2. Provide a name for your application, pick the Single Page type, and select Create.

    Create application

  3. Configure the redirect URI for your application.

    The redirect URI tells us where to redirect users after authentication and consent gathering.

    Redirect URI setup

  4. Copy or download the client application configuration (client ID most importantly) and add it to your application code. Use any OAuth library you want!

    Copy credentials

    React.js with cloudentity-auth-js
    Vue.js 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.authz.cloudentity.io',
     tenantId: 'postmance',
     authorizationServerId: 'docs',
     clientId: '3ad9f3f1235242689f661d0c303183d0',
     redirectUri: "http://localhost:3000/",
     userInfoUri: 'https://postmance.eu.authz.cloudentity.io/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;

   
    
                   
         
                   
                  
       // 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.authz.cloudentity.io',
       tenantId: 'postmance',
       authorizationServerId: 'docs',
       clientId: '3ad9f3f1235242689f661d0c303183d0',
       redirectUri: "http://localhost:5173/",
       userInfoUri: 'https://postmance.eu.authz.cloudentity.io/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();
           }
       );
   })

  5. Access your application and try the sign in.

Next Steps

Updated: Nov 2, 2023