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