- 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-cloudbase
to get
publishable key
and configure login methods.
If
auth-tool-cloudbase
failed, let user go to
https://tcb.cloud.tencent.com/dev?envId={env}#/env/apikey
to get
publishable key
and
https://tcb.cloud.tencent.com/dev?envId={env}#/identity/login-manage
to 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
js
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'
}
)