Complete authentication using the embedded login component

Update time: 2025-07-23 07:34:21

The embedded login component (Guard) is considered to be the best balance between flexibility and integration. This mode is recommended if the integration requires a deeper level of customization or if hosted mode cannot be used in some scenarios where the front-end and back-end are separated. The embedded login component is built and updated by GenAuth, uses industry best practice security design, and only requires a few lines of JavaScript code to integrate into your project. It can be loaded directly from CDN or NPM, or built from source code. GenAuth login components also provide multiple integration modes for Javascript native, React, Vue, and Angular, which can be seamlessly integrated in any of your projects and enjoy a high degree of customization flexibility. For more detailed introduction, please see Integrate GenAuth Guard.

You can check Hosted Login Page vs Embeddable Login Component to understand the difference between the GenAuth hosted login page and the embedded login component.

The GenAuth embedded login component integrates the following functions:

Login: including account and password login (including mobile phone number + password, email + password, username + password), verification code login (SMS verification code, email verification code) and mobile APP scan code.
Registration: including mobile phone verification code registration and username and password registration.
Social login, such as GitHub login (need to be configured in the background first).
APP scan code login (need to connect to APP scan code login first).
Mini program scan code login (need to be configured in the background first).
Enterprise identity source login (need to configure the enterprise identity source).
Forgot password and reset password.
MFA authentication.

It has the following features:

Lightweight: All resources packaged together are only a few hundred kb;
Responsive: Compatible with mobile and PC web pages;
Customizable: Can support complete UI customization functions.

¶ Access process of different front-end frameworks

No matter which framework you use, you need to use the application's appId, please go to the console to obtain (opens new window) first. For the location of APP ID, please refer to Application Configuration (opens new window).

Select front-end framework

First, install the GenAuth library through npm/yarn/cnpm.

It is recommended to use npm (stable version v3.1.21) or yarn, which can better cooperate with the webpack (opens new window) packaging tool, and can also be safely packaged and deployed in the production environment to enjoy the many benefits brought by the entire ecosystem and tool chain. If your network environment is not good, you can also use cnpm (opens new window) .

Run the following command line to install the GenAuth React.JS library:

$ yarn add @authing/guard-react

# OR

$ npm install @authing/guard-react --save

Then, complete the configuration in your React application:

App.tsx

// Code example: https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/App.tsx
import React from "react";
import { GuardProvider } from "@authing/guard-react";
import "@authing/guard-react/dist/esm/guard.min.css";

// Your business code root component
import RouterComponent from "./router";

const App = () => {
  return (
    <GuardProvider
      appId="GEN_AUTH_APP_ID"
      // If you are using private deployment GenAuth service, you need to pass in a custom host, such as:
      // host="https://my-authing-app.example.com"

      // By default, the first callback address you configured in the GenAuth console will be used as the callback address for this authentication.
      // If you configure multiple callback addresses, you can also specify them manually (this address also needs to be added to the "Login callback URL" of the application):
      // redirectUri="YOUR_REDIRECT_URI"
    >
      <RouterComponent></RouterComponent>
    </GuardProvider>
  );
};

Embed.tsx

// Code example: https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Embed.tsx
import React, { useEffect } from "react";
import { useGuard, User } from "@authing/guard-react";

export default function Login() {
  // Get Guard Example
  const guard = useGuard();

  useEffect(() => {
    // Use the start method to mount the Guard component to the DOM node you specify, and return userInfo after successful login
    guard.start("#authing-guard-container").then((userInfo: User) => {
      console.log("userInfo: ", userInfo);
    });
  }, []);

  return (
    <div>
      <div id="authing-guard-container"></div>
    </div>
  );
}

¶ Verify whether the user's Token is valid on the back end

The token field of the user information is a standard OIDC IdToken. You can verify this token on the back end using the application's ID and Secret.

Example token As follows:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJiaXJ0aGRhdGUiOiIiLCJmYW1pbHlfbmFtZSI6IiIsImdlbmRlciI6IiIsImdpdmVuX25hbWUiOiIiLCJsb2 NhbGUiOiIiLCJtaWRkbGVfbmFtZSI6IiIsIm5hbWUiOiIiLCJuaWNrbmFtZSI6IiIsInBpY3R1cmUiOiJodHRwcz ovL3VzZXJjb250ZW50cy5hdXRoaW5nLmNuL2F1dGhpbmctYXZhdGFyLnBuZyIsInByZWZlcnJlZF91c2VybmFtZSI 6InRlc3RAZXhhbXBsZS5jb20iLCJwcm9maWxlIjoiIiwidXBkYXRlZF9hdCI6IjIwMjEtMDEtMThUMDc6NDg6NTU uNzgxWiIsIndlYnNpdGUiOiIiLCJ6b25laW5mbyI6IiIsImFkZHJlc3MiOnsiY291bnRyeSI6IiIsInBvc3RhbF9j b2RlIjoiIiwicmVnaW9uIjoiIiwiZm9ybWF0dGVkIjoiIn0sInBob25lX251bWJlciI6bnVsbCwicGhvbmVfbnVt YmVyX3ZlcmlmaWVkIjpmYWxzZSwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhb HNlLCJkYXRhIjp7InR5cGUiOiJ1c2VyIiwidXNlclBvb2xJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsI mFwcElkIjoiNjAwNTNiNzQxNjQ3OGRlMmU4OGZhYjQzIiwiaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLC J1c2VySWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJfaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZT kiLCJwaG9uZSI6bnVsbCwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidXNlcm5hbWUiOiJ0ZXN0QGV4YW1wbGU uY29tIiwidW5pb25pZCI6bnVsbCwib3BlbmlkIjpudWxsLCJjbGllbnRJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg 1NTI4YyJ9LCJ1c2VycG9vbF9pZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImF1ZCI6IjYwMDUzYjc0MTY0 NzhkZTJlODhmYWI0MyIsImV4cCI6MTYxMjE2NTg4OCwiaWF0IjoxNjEwOTU2Mjg4LCJpc3MiOiJodHRwczovL3NhbXBsZS1hcHAuYXV0aGluZy5jbi9vaWRjIn0.SNyGBffF-zBqDQFINGxUJZrWSAADHQhbEOsKvnH4SLg

You can Decode this ID Token in JWT.IO (opens new window) (domestic users can visit this mirror site (opens new window)):

The sub field is the user's ID, and the aud field is the application's ID. You can learn the detailed meaning of each field of OIDC IdToken through Microsoft identity platform ID tokens (opens new window).

Basically all languages provide libraries for verifying IdToken. Taking 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 verification is successful, you can get the user's unique ID through the sub field, and then you can combine the user ID with your own business! If you need to grant different roles and permissions to different users, you can learn how to grant roles and permissions to users for fine-grained permission control.

¶ Detailed parameter and event list

GenAuth embedded login component supports high customization. In addition to customizing basic configurations such as title and logo, you can also configure different login methods and fully customize the style through custom CSS. In addition to successful login events, GenAuth embedded login component also encapsulates successful registration, login failure, login registration method switching and other events. For detailed documents, please see Login Component (Guard) Documentation.

Previous article: Use Hosted Login Page Next article: Use API & SDK

¶ Complete authentication using the embedded login component

¶ Embedded Login Component Introduction

¶ Access process of different front-end frameworks

¶ Verify whether the user's Token is valid on the back end

¶ Detailed parameter and event list