Single Page App

Summary

SkyJoy allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate SkyJoy Authentication and display user profile information in any Single Page Application (React, Angular…, etc.).

Before you begin

To use this quick start, you’ll need to:

• Contact SkyJoy Team ([email protected]) to get Client Credentials.

• Have NodeJS and npm installed on your machine.

Setup

Here is an example with ReactJS, you can setup with other frameworks such as AngularJS, VueJS, …, etc

Install the SkyId Javascript package

Install the package by running the following commands in your terminal:

npm install skyid-js

Configure Client Credential

Initialize SkyId and configure your client credentials:

// src/skyid.js

import Skyid from 'skyid-js';

const skyid = new Skyid({
  realm: 'loyalty',
  url: 'https://id.skyjoy.vn',
  clientId: 'your-client-id',
});

export default skyid;

Add a login button to your application UI

Handle Login process

You can trigger the login process by calling the skyid.login() function

// src/App.js

import React, { useEffect } from 'react';
import skyid from './skyid';

function App() {
 
  const handleLogin = () => {
    skyid.login(); // Trigger the login process
  };

  return (
    <div>
      <div>
        <button onClick={handleLogin}>Login</button>
      </div>
    </div>
  );
}

export default App;

Handle Logout

You can call skyid.logout() function to log out

// src/App.js

import React, { useEffect } from 'react';
import skyid from './skyid';

function App() {

  const handleLogin = () => {
    skyid.login(); // Trigger the login process
  };
  
  const handleLogout = () => {
    skyid.logout();
  };

  return (
    <div>
      <div>
        <button onClick={handleLogin}>Login</button>
      </div>
      
      <div>
        <button onClick={handleLogout}>Logout</button>
      </div>
    </div>
  );
}

export default App;

Authentication Status

// src/App.js

import React, { useEffect } from 'react';
import skyid from './skyid';

function App() {
  useEffect(() => {
    skyid.init({ onLoad: 'login-required' }).success((authenticated) => {
      if (authenticated) {
        // User is authenticated
        console.log(`User Token is ${skyid.token}`);
      } else {
        // Handle authentication failure
      }
    });
  }, []);

  const handleLogin = () => {
    skyid.login(); // Trigger the login process
  };

  const handleLogout = () => {
    skyid.logout();
  };

  return (
    <div>
      {skyid.authenticated ? (
        <div>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
}

export default App;