用 Apple 登录

1
import { createClient } from '@supabase/supabase-js'
2
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
3
4
// ---cut---
5
supabase.auth.signInWithOAuth({
6
  provider: 'apple',
7
})

1
# Get your access token from https://supabase.com/dashboard/account/tokens
2
export SUPABASE_ACCESS_TOKEN="your-access-token"
3
export PROJECT_REF="your-project-ref"
4
5
# Configure Apple auth provider
6
curl -X PATCH "https://api.supabase.com/v1/projects/$PROJECT_REF/config/auth" \
7
  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
8
  -H "Content-Type: application/json" \
9
  -d '{
10
    "external_apple_enabled": true,
11
    "external_apple_client_id": "your-services-id",
12
    "external_apple_secret": "your-generated-secret-key"
13
  }'

1
async function signIn() {
2
  try {
3
    // Generate a nonce for security
4
    const nonce = crypto.randomUUID() // or use your preferred nonce generation method
5
6
    const data = await AppleID.auth.signIn()
7
8
    const { data: authData, error } = await supabase.auth.signInWithIdToken({
9
      provider: 'apple',
10
      token: data.id_token,
11
      nonce: nonce,
12
    })
13
14
    if (error) {
15
      throw error
16
    }
17
18
    // Apple only provides the user's name on the first sign-in
19
    // The user object contains name information from Apple's response
20
    if (data.user && data.user.name) {
21
      const fullName = [
22
        data.user.name.firstName,
23
        data.user.name.middleName,
24
        data.user.name.lastName
25
      ].filter(Boolean).join(' ')
26
27
      // Save the name to user metadata for future use
28
      await supabase.auth.updateUser({
29
        data: {
30
          full_name: fullName,
31
          given_name: data.user.name.firstName,
32
          family_name: data.user.name.lastName,
33
        }
34
      })
35
    }
36
  } catch (error) {
37
    console.error('Apple sign in failed:', error)
38
    // Handle sign-in errors appropriately
39
  }
40
}

1
// Generate and store nonce for verification
2
const nonce = crypto.randomUUID()
3
4
// Initialize Apple ID with nonce
5
AppleID.auth.init({
6
  clientId: 'your-services-id',
7
  scope: 'name email',
8
  redirectURI: 'https://your-domain.com/auth/callback',
9
  usePopup: true,
10
  nonce: nonce,
11
})
12
13
// Listen for authorization success
14
document.addEventListener('AppleIDSignInOnSuccess', async (event) => {
15
  try {
16
    const { data: authData, error } = await supabase.auth.signInWithIdToken({
17
      provider: 'apple',
18
      token: event.detail.authorization.id_token,
19
      nonce: nonce,
20
    })
21
22
    if (error) {
23
      throw error
24
    }
25
26
    // Apple only provides the user's name on the first sign-in
27
    if (event.detail.user && event.detail.user.name) {
28
      const fullName = [
29
        event.detail.user.name.firstName,
30
        event.detail.user.name.middleName,
31
        event.detail.user.name.lastName
32
      ].filter(Boolean).join(' ')
33
34
      // Save the name to user metadata for future use
35
      await supabase.auth.updateUser({
36
        data: {
37
          full_name: fullName,
38
          given_name: event.detail.user.name.firstName,
39
          family_name: event.detail.user.name.lastName,
40
        }
41
      })
42
    }
43
  } catch (error) {
44
    console.error('Apple sign in failed:', error)
45
  }
46
})