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

    • Authenticate your first user

      • Use the hosted login page to complete the authentication
      • Use the embedded login component to complete the authentication
      • Use API & SDK to complete authentication
      • Verify user credentials (token)
      • Authority management for users
      • Realize logout
      • Next you may need
    • Access methods for different types of applications

    • 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. Authenticate your first user
  6. /
  7. Use the embedded login component to complete the authentication

¶ Use embeded login component to authenticate

Update Time: 2022-05-14 10:21:54
Edit

The embedded login component (Guard) is considered to be the best balance between flexibility and integration.If the integration requires a deeper level of customization or the hosting mode cannot be used in some scenarios where the front end and back end are separated, it is recommended to use this mode.The embedded login component is built and updated by Authing, using the best practice security design in industry. Only a few lines of JavaScript code is needed and then it can be integrated into your development project.

You can click here to understand the difference between the Authing hosted login page (Hosted) and the embedded login component (Embedded).

¶ Embedded login component introduction

The following functions are integrated in the Authing embedded login component:

  • Login: including account password login (including mobile phone number + password, email + password, username + password) and SMS code login.
  • Registration: including mobile phone SMS code registration, and username and password registration.
  • Social login, such as GitHub login (need to be configured in the background first).
  • APP QR code login (need to access APP scan code login first).
  • Mini Program QR code login (need to be configured in the background).
  • Enterprise identity source login (need to configure enterprise identity source).
  • Forget password and reset password.
  • MFA validation.

It has the following features:

  • Lightweight: All resources are packaged in only a few hundred KB.
  • Responsive: compatible with mobile and PC web pages.
  • Customization: It can support a complete UI customization function.

¶ Integrate with different front-end frameworks

Framework
React 16/17
Loading...

¶ Install

It is recommended to use create-react-app to initialize a React project

npx create-react-app first-authing-app --template typescript

And then, install @authing/react-ui-components SDK:

yarn add @authing/react-ui-components

Or:

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

¶ Initialize

You need to import AuthingGuard from @authing/react-ui-components. Initializing AuthingGuard requires only one parameter-your application ID (appId). You can get the appId of the application on the application list page of the console.

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

function App() {
  return (
    <div className="App">
      <AuthingGuard appId="authing_APP_ID" />
    </div>
  );
}

Authing Guard will automatically pull the configuration of the application, such as name, logo, etc., from the server.Refresh the page and an embedded login form is displayed:

Next, let's monitor user login events, and obtain user information after the user logs in successfully.

¶ Monitor login success event

It is simple. You only need to pass a callback onLogin.

function App() {
  return (
    <div className="App">
      <AuthingGuard
        appId="authing_APP_ID"
        onLogin={userinfo => {
          console.log(userinfo);
        }}
      />
    </div>
  );
}

Here we can use console.log to show user information:

The token field in user information is the identity credential. In the following steps, you need to carry it in requests when you want to access back-end resources. The back end will verify this token.

¶ Validate user token in back-end

The token field of the user information is a standard OIDC IdToken. You can use the application ID and Secret to verify this token on the backend.

An example of token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJiaXJ0aGRhdGUiOiIiLCJmYW1pbHlfbmFtZSI6IiIsImdlbmRlciI6IiIsImdpdmVuX25hbWUiOiIiLCJsb2NhbGUiOiIiLCJtaWRkbGVfbmFtZSI6IiIsIm5hbWUiOiIiLCJuaWNrbmFtZSI6IiIsInBpY3R1cmUiOiJodHRwczovL3VzZXJjb250ZW50cy5hdXRoaW5nLmNuL2F1dGhpbmctYXZhdGFyLnBuZyIsInByZWZlcnJlZF91c2VybmFtZSI6InRlc3RAZXhhbXBsZS5jb20iLCJwcm9maWxlIjoiIiwidXBkYXRlZF9hdCI6IjIwMjEtMDEtMThUMDc6NDg6NTUuNzgxWiIsIndlYnNpdGUiOiIiLCJ6b25laW5mbyI6IiIsImFkZHJlc3MiOnsiY291bnRyeSI6IiIsInBvc3RhbF9jb2RlIjoiIiwicmVnaW9uIjoiIiwiZm9ybWF0dGVkIjoiIn0sInBob25lX251bWJlciI6bnVsbCwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJkYXRhIjp7InR5cGUiOiJ1c2VyIiwidXNlclBvb2xJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImFwcElkIjoiNjAwNTNiNzQxNjQ3OGRlMmU4OGZhYjQzIiwiaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJ1c2VySWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJfaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJwaG9uZSI6bnVsbCwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidXNlcm5hbWUiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidW5pb25pZCI6bnVsbCwib3BlbmlkIjpudWxsLCJjbGllbnRJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyJ9LCJ1c2VycG9vbF9pZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImF1ZCI6IjYwMDUzYjc0MTY0NzhkZTJlODhmYWI0MyIsImV4cCI6MTYxMjE2NTg4OCwiaWF0IjoxNjEwOTU2Mjg4LCJpc3MiOiJodHRwczovL3NhbXBsZS1hcHAuYXV0aGluZy5jbi9vaWRjIn0.SNyGBffF-zBqDQFINGxUJZrWSAADHQhbEOsKvnH4SLg

You can decode the IdToken in this website (opens new window):

The sub field is the ID of the user, and the aud field is the ID of the application. You can learn the detailed definition of each field of OIDC IdToken through this article (opens new window).

Basically all languages provide libraries for validating IdToken. Take Node.js as an example, you can use JSON Web Token (opens new window) to verify IdToken.

const jwt = require("jsonwebtoken");

try {
  const data = jwt.verify("YOUR_ID_TOKEN", "YOUR_APP_SECRET");
} catch (error) {
  // token might be invalid or expired
  console.error(error);
}

If the validation is successful, you can get the unique ID of the user through the sub field, and then you can combine the user ID with your own business logic code. If you need to assign different roles and privileges to different users, you can learn how to assign roles and privileges to users for fine-grained permission control.

¶ Detailed parameter and event list

The Authing embedded login component is highly customizable. The Authing embedded login component supports highly customizable.In addition to customizing the basic configuration such as the title and Logo, you can also control the visibility of the login method, fully customize the style through custom CSS, and so on. In addition to successful login events, the Authing embedded login component also encapsulates events such as successful registration, login failure, and login registration mode switching. For detailed documentation, please refer to the Guard document.

Prev: Use the hosted login page to complete the authentication Next: Use API & SDK to complete authentication
  • Embedded login component introduction
  • Integrate with different front-end frameworks
  • Validate user token in back-end
  • Detailed parameter and event list

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.