Adding Native or Mobile Applications

Integrate application for user login and access control.

Select Applications > Clients > Create client in the selected workspace.
Provide a name for your application, pick the Mobile/Desktop (native) type, and select Create.
Configure the redirect URI for your application.

The redirect URI tells us where to redirect users after authentication and consent gathering.
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;

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;

Access your application and try the sign in.

Next Steps​

Next Steps