Overview
Prerequisites: CloudBase environment ID (env) Prerequisites: CloudBase environment Region (region)
Core Capabilities
Use Case: Web frontend projects using @cloudbase/js-sdk@2.24.0+ for user authentication Key Benefits: Compatible with supabase-js API, supports phone, email, anonymous, username/password, and third-party login methods @cloudbase/js-sdk cdn source: https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js
Prerequisites
- Automatically use
auth-tool-cloudbaseto getpublishable keyand configure login methods. - If
auth-tool-cloudbasefailed, let user go tohttps://tcb.cloud.tencent.com/dev?envId={env}#/env/apikeyto getpublishable keyandhttps://tcb.cloud.tencent.com/dev?envId={env}#/identity/login-manageto set up login methods
Quick Start
import cloudbase from '@cloudbase/js-sdk'
const app = cloudbase.init({
env: `env`, // CloudBase environment ID
region: `region`, // CloudBase environment Region, default 'ap-shanghai'
accessKey: 'publishable key', // required, get from auth-tool-cloudbase
auth: { detectSessionInUrl: true }, // required
})
const auth = app.auth
``
---
## Login Methods
**1. Phone OTP (Recommended)**
- Automatically use `auth-tool-cloudbase` turn on `SMS Login`const { data, error } = await auth.signInWithOtp({ phone: '13800138000' }) const { data: loginData, error: loginError } = await data.verifyOtp({ token:'123456' })
**2. Email OTP**
- Automatically use `auth-tool-cloudbase` turn on `Email Login`
const { data, error } = await auth.signInWithOtp({ email: 'user@example.com' }) const { data: loginData, error: loginError } = await data.verifyOtp({ token: '654321' })
**3. Password**
const { data, error } = await auth.signInWithPassword({ username: 'test_user', password: 'pass123' }) const { data, error } = await auth.signInWithPassword({ email: 'user@example.com', password: 'pass123' }) const { data, error } = await auth.signInWithPassword({ phone: '13800138000', password: 'pass123' })
**4. Registration (Smart: auto-login if exists)**
- Only support email and phone otp registration
- Automatically use `auth-tool-cloudbase` turn on `Email Login` or `SMS Login`
// Email Otp const { data, error } = await auth.signUp({ email: 'new@example.com', nickname: 'User' }) const { data: loginData, error: loginError } = await data.verifyOtp({ token: '123456' })
// Phone Otp const { data, error } = await auth.signUp({ phone: '13800138000', nickname: 'User' }) const { data: loginData, error: loginError } = await data.verifyOtp({ token: '123456' })
**5. Anonymous**
- Automatically use `auth-tool-cloudbase` turn on `Anonymous Login`
const { data, error } = await auth.signInAnonymously()
**6. OAuth (Google/WeChat)**
- Automatically use `auth-tool-cloudbase` turn on `Google Login` or `WeChat Login`
const { data, error } = await auth.signInWithOAuth({ provider: 'google' }) window.location.href = data.url // Auto-complete after callback
**7. Custom Ticket**
await auth.signInWithCustomTicket(async () => { const res = await fetch('/api/ticket') return (await res.json()).ticket })
**8. Upgrade Anonymous**
const { data, error } = await auth.getSession() const { data: signUpData, error: signUpError} = await auth.signUp({ phone: '13800000000', anonymous_token: data.session.access_token, }) await signUpData.verifyOtp({ token: '123456' })
---
## User Management
// Sign out const { data, error } = await auth.signOut()
// Get user const { data, error } = await auth.getUser() console.log(data.user.email, data.user.phone, data.user.user_metadata?.nickName)
// Update user (except email, phone) const { data, error } = await auth.updateUser({ nickname: 'New Name', gender: 'MALE', avatar_url: 'url' })
// Update user (email or phone) const { data, error } = await auth.updateUser({ email: 'new@example.com' }) const { data, error } = await data.verifyOtp({ email: "new@example.com", token: "123456" });
// Change password (logged in) const { data, error } = await auth.resetPasswordForOld({ old_password: 'old', new_password: 'new' })
// Reset password (forgot) const { data, error } = await auth.reauthenticate() const { data, error } = await data.updateUser({ nonce: '123456', password: 'new' })
// Link third-party const { data, error } = await auth.linkIdentity({ provider: 'google' })
// View/Unlink identities const { data, error } = await auth.getUserIdentities() const { data, error } = await auth.unlinkIdentity({ provider: data.identities[0].id })
// Delete account const { data, error } = await auth.deleteMe({ password: 'current' })
// Listen to state changes const { data, error } = auth.onAuthStateChange((event, session, info) => { // INITIAL_SESSION, SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED, PASSWORD_RECOVERY, BIND_IDENTITY })
// Get access token const { data, error } = const { data, error } = await auth.getSession() fetch('/api/protected', { headers: { Authorization: Bearer ${data.session?.access_token} } })
// Refresh user const { data, error } = await auth.refreshUser()
---
## User Type
declare type User = { id: any aud: string role: string[] email: any email_confirmed_at: string phone: any phone_confirmed_at: string confirmed_at: string last_sign_in_at: string app_metadata: { provider: any providers: any[] } user_metadata: { name: any picture: any username: any gender: any locale: any uid: any nickName: any avatarUrl: any location: any hasPassword: any } identities: any created_at: string updated_at: string is_anonymous: boolean }
---
## Complete Example
class PhoneLoginPage { async sendCode() { const phone = document.getElementById('phone').value if (!/^1[3-9]\d{9}$/.test(phone)) return alert('Invalid phone')
const { data, error } = await auth.signInWithOtp({ phone }) if (error) return alert('Send failed: ' + error.message)
this.verifyFunction = data.verify document.getElementById('codeSection').style.display = 'block' this.startCountdown(60) }
async verifyCode() { const code = document.getElementById('code').value if (!code) return alert('Enter code')
const { data, error } = await this.verifyFunction(code) if (error) return alert('Verification failed: ' + error.message)
console.log('Login successful:', data.user) window.location.href = '/dashboard' }
startCountdown(seconds) { let countdown = seconds const btn = document.getElementById('resendBtn') btn.disabled = true
const timer = setInterval(() => { countdown-- btn.innerText = Resend in ${countdown}s if (countdown <= 0) { clearInterval(timer) btn.disabled = false btn.innerText = 'Resend' } }, 1000) } }
---
## WeChat Mini Program
// Silent login with OpenID const { data, error } = await auth.signInWithOpenId() // WeChat Cloud mode (default) const { data, error } = await auth.signInWithOpenId({ useWxCloud: false }) // HTTP mode
// Phone authorization login const { data, error } = await auth.signInWithPhoneAuth({ phoneCode: 'xxx' })
---