Authing DocsDocuments
Concept
Guides
Development Integration
Application integration
Concept
Guides
Development Integration
Application integration
Old Version
Guides
  • Quick start

    • Authenticate your first user

    • Access methods for different types of applications

      • Integrate Authing in traditional Web App
      • Integrate in Single Page Application (SPA) Authing
      • Integrate in mobile terminal (iOS, Andriod) Authing
    • Console overview
  • Authenticate the user

  • Authority management for users

  • Authorization

  • Manage user accounts

  • Manage User Directory

  • Management Application

  • Become a source of federal authentication identity

  • Connect to an external identity provider (IdP)

  • Open up WeChat ecology
  • Migrate users to Authing

  • Management organization

  • Expandable capabilities

  • Audit Log

  • Configure security information

  • Configure user pool information

  • Deployment plan

  • Frequently Asked Questions FAQs

  1. Guides
  2. /
  3. Quick start

  4. /
  5. Access methods for different types of applications
  6. /
  7. Integrate in Single Page Application (SPA) Authing

¶ Integrate Authing with Single Page Application

Update Time: 2022-10-10 11:16:11
Edit

Single Page Application (SPA) refers to a Web application or website model that interacts with users by dynamically rewriting the current page, rather than traditionally reloading the entire new page from the server. This method avoids switching between pages to interrupt the user experience, making the application more like a desktop application. In a single-page application, all necessary codes (HTML, JavaScript, and CSS) are retrieved through the loading of a single page, or appropriate resources are dynamically loaded and added to the page as needed (usually in response to user actions). Interaction with single-page applications usually involves dynamic communication with back-end servers.

The easiest way to access Authing in SPA applications is to use the embedded login component and Javascript SDK provided by Authing for login and authentication. This article takes the React project as an example.

¶ Get APP ID

After logging in to Authing, Authing will create a default user pool and application for you. You can also create your own application. In the application details, you can get the application ID and click the copy button:

¶ Integrate Authing in your SPA

¶ Install Authing login component

yarn add @authing/react-ui-components

 # OR

npm i @authing/react-ui-components --save

@authing/react-ui-components has some React components provided by Authing and APIs for obtaining AuthenticationClient, including the AuthingGuard login component.

¶ Configure AuthingGuard

import React from "react";
import ReactDOM from "react-dom";
import { AuthingGuard } from "@authing/react-ui-components";
// import css file
import "@authing/react-ui-components/lib/index.min.css";

const App = () => {
  const appId = "AUTHING_APP_ID";

  // successfully login
  const onLogin = userInfo => {
    console.log(userInfo);
    // redirect to other page here
    // ...
  };

  return <AuthingGuard appId={appId} onLogin={onLogin} />;
};

ReactDOM.render(<App />, root);

By passing in the appId and AuthingGuard, it can display the login box.

¶ Logout

Now you can log in, and you need to implement a method for users to log out, which can be achieved through AuthenticationClient.

// src/index.js

import { initAuthClient } from "@authing/react-ui-components";
// initialize AuthenticationClient in project entry
initAuthClient({
  appId: "AUTHING_APP_ID"
});
import React from "react";
import { getAuthClient } from "@authing/react-ui-components";

const LogoutButton = () => {
  return <button onClick={() => getAuthClient().logout()}>logout</button>;
};

export default LogoutButton;

¶ Get user information

After the user logs in, you may also need to obtain the user information of the currently logged-in user.

// src/index.js

import { initAuthClient } from "@authing/react-ui-components";
// initialize AuthenticationClient in project entry
initAuthClient({
  appId: "AUTHING_APP_ID"
});
import React, { useState, useEffect } from "react";
import { getAuthClient } from "@authing/react-ui-components";

const UserInfo = () => {
  const [user, setUser] = useState();
  const [isAuthenticated, setIsAuthenticated] = useState(true);

  useEffect(() => {
    getAuthClient()
      .getCurrentUser()
      .then(userInfo => {
        if (userInfo) {
          setUser(userInfo);
        } else {
          setIsAuthenticated(false);
        }
      });
  }, []);

  return isAuthenticated ? (
    user ? (
      <div>
        <img src={user.photo} alt={user.username} />
        <h2>{user.username}</h2>
        <p>{user.email}</p>
      </div>
    ) : (
      <div>Loading...</div>
    )
  ) : (
    <h3>not logged in yet</h3>
  );
};

export default UserInfo;

getCurrentUser can get the information of the currently logged in user. If not logged in, it will return null.

Prev: Integrate Authing in traditional Web App Next: Integrate in mobile terminal (iOS, Andriod) Authing
  • Get APP ID
  • Integrate Authing in your SPA

User identity management

Integrated third-party login
Mobile phone number flash check (opens new window)
Universal login form component
Custom authentication process

Enterprise internal management

Single Sign On
Multi-factor Authentication
Authority Management

Developers

Development Document
Framework Integration
Blog (opens new window)
GitHub (opens new window)
Community User Center (opens new window)

Company

400 888 2106
sales@authing.cn
16 / F, Block B, NORTH STAR CENTURY CENTER, Beijing(Total)
room 406, 4th floor, zone B, building 1, No. 200, Tianfu Fifth Street, Chengdu(branch)

Beijing ICP No.19051205-1

© Beijing Steamory Technology Co.