Introduction
This section outlines the detailed steps required to authenticate users in the GluedIn SDK from your application. The GluedIn SDK provides two primary authentication methods: Silent Authentication and Authentication with the Auth Module (which includes full UX/UI screens).
Methods to Authenticate the App with GluedIn SDK:
1. Silent Authentication: Allows a seamless login without user interaction.
2. Authentication with the Auth Module: Provides built-in UI screens for user interaction and complete authentication.
Silent Authentication:
Below are the steps for silent authentication in the system:
1. Import the GluedIn SDK Ensure that the GluedIn SDK is imported into your project.
import gluedin from "gluedin-shorts-js";
2. Set Up User Information Create a state object to hold the user data that will be passed for authentication.
const [formData, setFormData] = useState({
email: "", // User's email address for login/registration
password: "", // User's password
deviceId: "1234XXXXX", // Unique identifier for the device
deviceType: "web", // Set as "web" for browser applications
autoCreate: true, // Automatically create user if email is not found
termConditionAccepted: true, // Indicates acceptance of terms & conditions
});
Explanation of Fields:
-
email: The user's email for registration or login.
-
password: The password associated with the user.
-
deviceType: Always set to "web" for browser applications.
-
deviceId: A unique identifier for the user's device.
-
autoCreate: Set to true to create a new user if the provided email ID is not available in the database. Set to false for authentication only.
-
termConditionAccepted: Indicates whether the user has accepted the terms and conditions. The default is true.
3. Perform Silent Authentication Use the GluedInAuthModule to send user authentication data and handle responses.
var authLoginInput = new gluedin.GluedInAuthModule();
var userSignInResponse = await authLoginInput.AuthRawData(formData);
if (userSignInResponse.status === 200) {
if (userSignInResponse.data.statusCode === 2001) {
// Successfully authenticated, retrieve user meta-IDs
var userModuleObj = new gluedin.GluedInUserModule();
var userConfigResponse = await userModuleObj.getUserMetaIds("");
if (userConfigResponse.status === 200 || userConfigResponse.status === 201) {
let following = userConfigResponse.data.result.following || [];
localStorage.setItem("following", JSON.stringify(following)); // Store user data locally
}
// Navigate to the vertical player page upon successful login
navigate("/vertical-player");
} else {
// Handle authentication errors
setErrors({ loginRespError: userSignInResponse.data.statusMessage });
}
setIsLoading(false);
} else {
// Handle request failure
setIsLoading(false);
setErrors({ loginRespError: userSignInResponse.data.statusMessage });
}
Additional Notes:
-
Error Handling: Properly handle errors and loading states to improve user experience.
-
Navigation: The navigate("/vertical-player"); function redirects users to the specific page after successful authentication.
Authentication with the Auth Module:
This section provides step-by-step instructions for integrating the GluedIn SDK's Auth Module into your application, including the necessary UI/UX components for user login.
Steps to Implement Authentication with the Auth Module
1. Navigate to the LoginForm Component: Access the LoginForm component by following the path
src/components/Auth/LoginForm
2. Add the Login Code Snippet: Use the following code to create a login form within the LoginForm component:
<div className="sign-full">
<div className="sign-body">
<div className="res-logo desk-none text-center">
<Link to="/">
<img
src="./gluedin/images/Brand.svg"
alt="Logo"
style={{ width: "200px", height: "80px" }}
className="m-auto"
/>
</Link>
</div>
<h3 className="text-blk ft-600 res-none tab-res-none">
{t("Welcome-GluedIn")}
</h3>
{errors?.loginRespError && <p className="error">{errors?.loginRespError}</p>}
<form
id="signInForm"
onSubmit={handleSubmit}
className="mt-t-40"
>
{/* Email Input */}
<div className="input-grp first-input-box">
<label>{t("label-email")}</label>
<input
type="text"
name="email"
id="email"
value={formData.email}
onChange={handleInputChange}
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
{/* Password Input */}
<div className="input-grp">
<label>{t("label-password")}</label>
<div className="over-icon">
<input
type={passwordType}
id="password"
name="password"
value={formData.password}
onChange={handleInputChange}
/>
<span onClick={togglePassword}>
{passwordType === "password" ? (
<img src="./gluedin/images/eye.svg" alt="Show password" />
) : (
<i className="fa fa-eye-slash" aria-hidden="true"></i>
)}
</span>
</div>
{errors?.password && <span className="error">{errors?.password}</span>}
</div>
{/* Submit Button */}
<div className="input-grp">
<button
type="submit"
className="user-sign-in submit-button flex items-center justify-center disabled:pointer-events-none disabled:opacity-80"
disabled={isLoading}
>
{isLoading ? <LoaderDark /> : t("btn-signIn")}
</button>
</div>
{/* Guest Login Link */}
<div className="input-grp text-center">
<div className="link-text" style={{ display: `block` }}>
<span>{t("text-account")}</span>
<a href="/vertical-player" className="link">
{t("guest-Login")}
</a>
</div>
</div>
</form>
</div>
</div>
