Sign Up and Sign In
Through AI Builder, you can create personalized user login experiences by conversing with AI. This document will walk you through how to interact with AI using natural language to quickly build a login system that meets your requirements.
Using the Hosted Login Page
Cloud Development provides a unified hosted login page at the environment level, which can be configured and managed via the Development Platform.
User Sign-in Status
You can use the following method to determine if a user is signed in, which excludes anonymous sign-in users.
Boolean($w.auth.currentUser.userId);
To determine if a user is signed in (including anonymous sign-in), use the following method. Note: Anonymous sign-in users do not have a userId property.
Boolean($w.auth.currentUser.name === "Anonymous" || $w.auth.currentUser.userId);
Redirect to Login Page
If the user is not signed in, you can use the following method to redirect to the login page.
const tcb = await $w.cloud.getCloudInstance();
tcb.auth().toDefaultLoginPage({
config_version: "env",
redirect_uri: window.location.href,
query: {
s_domain: $w.utils
.resolveStaticResourceUrl("/")
.replace(/^https?:\/\//, "")
.split("/")[0],
},
});
Complete Example: Page Login Check and Redirect
Here is a complete example prompt designed to add a login check feature to the page and automatically redirect users to the hosted login page when they are not signed in:
💡 Hosted Login Page AI Prompt Template
Add a login check for all pages, using Boolean($w.auth.currentUser.userId) to determine if the current user is signed in.
If not signed in, do not render the page and redirect to the login page via the following checkAuth method.
const checkAuth = async () => {
if (!Boolean($w.auth.currentUser.userId)) {
const tcb = await $w.cloud.getCloudInstance();
tcb.auth().toDefaultLoginPage({
config_version: "env",
redirect_uri: window.location.href,
query: {
s_domain: $w.utils
.resolveStaticResourceUrl("/")
.replace(/^https?:\/\//, "")
.split("/")[0],
},
});
}
};
Write Code Directly in Dev Mode
If the prompt-based approach fails to reliably implement the login check feature, you can directly write login-related code in the AI Builder's Dev Mode code editor.
useEffect(() => {
const checkAuth = async ($w) => {
if (!Boolean($w.auth.currentUser.userId)) {
const tcb = await $w.cloud.getCloudInstance();
tcb.auth().toDefaultLoginPage({
config_version: "env",
redirect_uri: window.location.href,
query: {
s_domain: $w.utils
.resolveStaticResourceUrl("/")
.replace(/^https?:\/\//, "")
.split("/")[0],
},
});
}
};
checkAuth(props.$w);
}, []);
if (!Boolean(props.$w.auth.currentUser.userId)) {
return null;
}
Custom Login Page
Only when the hosted login page fails to meet your specific business requirements is it recommended to create a custom login page. While custom login pages offer a more flexible user authentication experience, you will be responsible for handling security, compatibility, and other related issues.
The Hosted Login Page supports customizing the appearance and features of the login page to meet your specific business requirements.
- Go to Cloud Development/Identity Authentication
- In the list of login methods, enable the required login methods, such as username-password login, phone number verification code login, email verification code login, etc.
1. Username and Password Login
This login method does not support direct registration. Users need to first complete registration through other methods (such as phone number verification code or email verification code), and then set a username and password during the registration process.
Below is the AI prompt template. You can modify the feature requirements section according to your actual needs.
💡 Username and Password Login AI Prompt Template
Login Page Creation Requirements
Feature requirements:
- Username/Password input box
- Display loading/error status
- Concise and aesthetic UI design
Login Method:
const tcb = await $w.cloud.getCloudInstance();
const loginState = await tcb.auth().signIn({ username, password });
2. Phone Number Verification Code Login
Phone number verification code login supports both login and registration scenarios, providing users with a convenient authentication method.
Sign-in Scenario
Below is the AI prompt template for login. You can modify the feature requirements section according to your actual needs.
💡 Phone Number Verification Code Login AI Prompt Template
Create a phone number verification code login page:
Feature requirements:
- Phone number input box (supports +86 format)
- Verification code input box
- Send verification code button (with countdown)
- Login button
- Loading status and error messages
Specific Login Method:
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
Send verification code: The return value must be saved and will be used during login.
const verificationInfo = await auth.getVerification({
phone_number: `+86 ${phoneNum}`,
});
Login Method:
await auth.signInWithSms({
verificationInfo,
verificationCode, // verification code entered by the user
phoneNum,
});
Registration Scenario
Below is the registration AI prompt template. You can modify the feature requirements section according to your actual needs.
💡 Phone Number Verification Code Registration AI Prompt Template
Create a phone number verification code registration page:
Feature requirements:
- Phone number input box (supports +86 format)
- Verification code input box
- Send verification code button (with countdown)
- Required: password input box
- Required: Username input box (Password length must be at least 8 characters and no more than 32 characters, containing both letters and numbers.)
- Optional: nickname input box
- Register button
- Loading status and error messages
Specific registration method:
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
const verification = await auth.getVerification({
phone_number: phoneNumber
});
// Verify the correctness of the Captcha.
const verificationTokenRes = await auth.verify({
verification_id: verification.verification_id,
verification_code: verificationCode
});
// If the user already exists, log in.
if (verification.is_user) {
await auth.signIn({
username: phoneNumber,
verification_token: verificationTokenRes.verification_token
});
} else {
// Otherwise, register a new user. When registering a new user, you can set a password and username. Upon successful registration, the user will be automatically logged in.
await auth.signUp({
phone_number: phoneNumber,
verification_code: verificationCode,
verification_token: verificationTokenRes.verification_token,
// Optional, set nickname.
name: name: "Mobile user",
// Optional, set password.
password: "password",
// Optional, set login username.
username: "username"
});
}
3. Email Verification Code Login
Email verification code login similarly supports both login and registration scenarios, providing users with a convenient authentication method.
Sign-in Scenario
Below is the AI prompt template for login. You can modify the feature requirements section according to your actual needs.
💡 Email Verification Code Login AI Prompt Template
Create an email verification code login page:
Feature requirements:
- Email input box
- Verification code input box
- Send verification code button (with countdown)
- Login button
- Loading status and error messages
Specific Login Method:
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
Send verification code: The return value must be saved and will be used during login.
const verificationInfo = await auth.getVerification({
email: email,
});
Login Method:
await auth.signInWithEmail({
verificationInfo,
verificationCode, // verification code entered by the user
email: email,
});
Registration Scenario
Below is the registration AI prompt template. You can modify the feature requirements section according to your actual needs.
💡 Email Verification Code Registration AI Prompt Template
Create an email verification code registration page:
Feature requirements:
- Email input box
- Verification code input box
- Send verification code button (with countdown)
- Required: password input box
- Required: Username input box (Password length must be at least 8 characters and no more than 32 characters, containing both letters and numbers.)
- Optional: nickname input box
- Register button
- Loading status and error messages
Specific registration method:
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
const verification = await auth.getVerification({
email: email
});
// Verify the correctness of the Captcha.
const verificationTokenRes = await auth.verify({
verification_id: verification.verification_id,
verification_code: verificationCode
});
// If the user already exists, log in.
if (verification.is_user) {
await auth.signIn({
username: email,
verification_token: verificationTokenRes.verification_token
});
} else {
// Otherwise, register a new user. When registering a new user, you can set a password and username. Upon successful registration, the user will be automatically logged in.
await auth.signUp({
email: email,
verification_code: verificationCode,
verification_token: verificationTokenRes.verification_token,
// Optional, set nickname.
name: name: "Email user",
password: password,
username: username
});
}
User Sign-out
User Sign-out clears the current user's login status, so that re-authentication is required when they log in again.
Below is the registration AI prompt template. You can modify the feature requirements section according to your actual needs.
💡 User Sign-out AI Prompt Template
Add Sign out button
Specific Sign-out Method:
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
await auth.signOut();