Hi,
I'm trying to sign in with Apple CloudKit.
I'm using the following code:
'use client';
import { CLOUDKIT_CONSTANTS } from '@/constants/cloudkit';
import { setCloudKitConfigured } from '@/lib/cloudkitSingleton';
import { CloudKitStatic } from '@/types/cloudkit';
import Script from 'next/script';
declare global {
interface Window {
CloudKit: CloudKitStatic;
}
}
export default function Home() {
const initializeCloudKit = async () => {
console.info('⭐️ initializeCloudKit - start');
// 古い認証情報を削除
try {
// LocalStorageから古い認証情報を削除
const keysToRemove = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && (key.includes('cloudkit') || key.includes('CloudKit'))) {
keysToRemove.push(key);
}
}
keysToRemove.forEach(key => localStorage.removeItem(key));
// SessionStorageからも削除
const sessionKeysToRemove = [];
for (let i = 0; i < sessionStorage.length; i++) {
const key = sessionStorage.key(i);
if (key && (key.includes('cloudkit') || key.includes('CloudKit'))) {
sessionKeysToRemove.push(key);
}
}
sessionKeysToRemove.forEach(key => sessionStorage.removeItem(key));
console.log('古い認証情報を削除しました');
} catch (cleanupError) {
console.warn('認証情報のクリーンアップ中にエラー:', cleanupError);
}
try {
const cloudKit = window.CloudKit.configure({
containers: [
{
containerIdentifier: 'XXXXXX',
apiTokenAuth: {
apiToken: 'XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX',
persist: false,
signInButton: {
id: 'cloudkit-sign-in-button',
theme: 'black',
},
signOutButton: {
id: 'cloudkit-sign-out-button',
theme: 'black',
},
},
environment: 'development',
},
],
});
console.info('⭐️ cloudKit', cloudKit);
setCloudKitConfigured(true);
const container = cloudKit.getDefaultContainer();
console.info('⭐️ CloudKit configured, setting up auth...');
// 初期認証状態をチェック
try {
const initialUser = await container.setUpAuth();
console.info('⭐️ setUpAuth result:', initialUser);
} catch (authError) {
console.info('⭐️ setUpAuth error (expected for unauthenticated):', authError);
}
// CloudKitの標準コールバックも併用（念のため）
try {
container.whenUserSignsIn().then((userInfo: any) => {
console.info('⭐️ CALLBACK: whenUserSignsIn fired!', userInfo);
});
container.whenUserSignsOut().then(() => {
console.info('⭐️ CALLBACK: whenUserSignsOut fired!');
});
} catch (callbackError) {
console.info('⭐️ Callback setup error (non-critical):', callbackError);
}
console.info('⭐️ initializeCloudKit - completed');
} catch (error) {
console.error('⭐️ Critical CloudKit initialization error:', error);
}
};
return (
<>
<Script
src="https://cdn.apple-cloudkit.com/ck/2/cloudkit.js"
strategy="afterInteractive"
onLoad={() => {
initializeCloudKit();
}}
onError={error => {
console.error('⭐️ CloudKit initialization error:', error);
}}
/>
<div id="cloudkit-sign-in-button" />
<div id="cloudkit-sign-out-button" />
</>
);
}
In Chrome secret tab, I can sign in successfully.
But in Chrome normal tab, I can't sign in.
In normal tab, following error occurs on sign in button click:
cloudkit.js:14 Uncaught (in promise) Error: UNKNOWN_ERROR
cloudkit.js:14 GET https://api.apple-cloudkit.com/database/1/XXXXXX/XXXXXX/public/users/caller?ckjsBuildVersion=2420ProjectDev22&ckjsVersion=2.6.4&clientId=XXXXX-XXXXXXX-XXXX-XXXXX&
ckAPIToken=XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX
421 (Misdirected Request)
I think, cloudkit instance has re-initialized when I click the sign in button only in normal tab.
So I can't sign in.
Do you have any idea what might be causing the error ?
Thanks in advance for your help!