--- title: How to Sign In with Apple Using Capacitor description: Learn how to implement Apple Sign-In in your Capacitor app using the Apple Sign-In plugin on Android, iOS, and Web. date: created: 2026-03-02 updated: 2026-07-14 authors: - robingenz categories: - Capacitor - Guides - SDKs links: - Capacitor Apple Sign-In: sdks/capacitor/apple-sign-in.md faq: true --- # How to Sign In with Apple Using Capacitor Sign in with Apple lets users authenticate with their Apple ID, offering a privacy-focused alternative to other social logins. Apple requires apps that offer third-party sign-in to also support Sign in with Apple. The [Capacitor Apple Sign-In plugin](../../sdks/capacitor/apple-sign-in.md) provides a straightforward way to integrate Apple Sign-In into your Ionic or Capacitor app on Android, iOS, and web. This guide walks you through setting up the required credentials, configuring the plugin for each platform, and implementing the sign-in flow.
Build and deploy your Capacitor app with Capawesome Cloud
## Prerequisites Before you begin, make sure you have the following: - An **Apple Developer Program** membership with access to the [Apple Developer Portal](https://developer.apple.com/){:target="_blank"}. - A **Capacitor app** with the [Capacitor Apple Sign-In plugin](../../sdks/capacitor/apple-sign-in.md) installed. To install the plugin, please refer to the [Installation](../../sdks/capacitor/apple-sign-in.md#installation) section in the plugin documentation. ## Setting Up Apple Developer Credentials ### Creating an App ID If you haven't already, you need to create an App ID with the "Sign in with Apple" capability enabled: 1. Go to the [Apple Developer Portal](https://developer.apple.com/){:target="_blank"} and navigate to **Certificates, Identifiers & Profiles** > **Identifiers**. 2. Click the **+** button to create a new identifier and select **App IDs**. 3. Select **App** as the type and click **Continue**. 4. Enter a **Description** (e.g. `My Capacitor App`) and a **Bundle ID** that matches your iOS app (e.g. `com.example.app`). 5. Scroll down to the **Capabilities** section, check **Sign in with Apple**, and click **Continue**. 6. Review the details and click **Register**. ### Creating a Service ID (Android and Web) On Android and web, Apple Sign-In uses a web-based OAuth flow. You need a Service ID to identify your app in this flow: 1. In the Apple Developer Portal, navigate to **Certificates, Identifiers & Profiles** > **Identifiers**. 2. Click the **+** button, select **Services IDs**, and click **Continue**. 3. Enter a **Description** (e.g. `My Capacitor App - Web`) and an **Identifier** (e.g. `com.example.app.web`). This identifier will be used as the `clientId` when initializing the plugin. 4. Click **Continue**, then **Register**. 5. Click on the newly created Service ID and check **Sign in with Apple**. 6. Click **Configure** next to Sign in with Apple. 7. Under **Domains and Subdomains**, add the domain where your app is hosted (e.g. `example.com`). Enter just the domain without a protocol or trailing slash. 8. Under **Return URLs**, add the redirect URL that the plugin will use after authentication (e.g. `https://example.com/callback`). The URL must use the `https://` scheme. 9. Click **Save**, then **Continue**, and **Save** again. ## Configuring Your Capacitor App ### Android No additional configuration is required on Android beyond installing the plugin. ### iOS On iOS, you need to add the "Sign in with Apple" capability in Xcode: 1. Open your project in Xcode by running `npx cap open ios`. 2. Select your app target and navigate to the **Signing & Capabilities** tab. 3. Click **+ Capability** and search for **Sign in with Apple**. 4. Add the capability. Xcode will automatically update your entitlements file. ### Web No additional configuration is required on Web beyond installing the plugin. ## Implementing the Sign-In Flow ### Initializing the Plugin On Android and web, you need to initialize the plugin before calling any other method. Use [`initialize(...)`](../../sdks/capacitor/apple-sign-in.md#initialize) and pass the **Service ID** you created earlier as the `clientId`: ```typescript import { AppleSignIn } from '@capawesome/capacitor-apple-sign-in'; const initialize = async () => { await AppleSignIn.initialize({ clientId: 'com.example.app.web', // Your Service ID from the Apple Developer Portal }); }; ``` On iOS, initialization is not required because the plugin uses the native Sign in with Apple framework directly. ### Signing In Use the [`signIn(...)`](../../sdks/capacitor/apple-sign-in.md#signin) method to start the Apple Sign-In flow. You can request scopes for the user's name and email: ```typescript import { AppleSignIn, SignInScope } from '@capawesome/capacitor-apple-sign-in'; const signIn = async () => { const result = await AppleSignIn.signIn({ redirectUrl: 'https://example.com/callback', // Only required on Android and Web scopes: [SignInScope.Email, SignInScope.Name], }); console.log('Identity token:', result.identityToken); console.log('Authorization code:', result.authorizationCode); console.log('User ID:', result.userId); console.log('Email:', result.email); console.log('Given name:', result.givenName); console.log('Family name:', result.familyName); }; ``` !!! warning Apple only returns the user's name and email on the **first** sign-in. Subsequent sign-ins will not include this information, so make sure to store it on your backend after the initial authentication. ### Handling Errors If the user cancels the sign-in flow, the plugin throws an error with the code `SIGN_IN_CANCELED`. You can handle this to distinguish between user cancellation and actual errors: ```typescript import { AppleSignIn, SignInScope } from '@capawesome/capacitor-apple-sign-in'; const signIn = async () => { try { const result = await AppleSignIn.signIn({ scopes: [SignInScope.Email, SignInScope.Name], }); console.log('Identity token:', result.identityToken); } catch (error: any) { if (error.code === 'SIGN_IN_CANCELED') { console.log('User canceled sign-in'); } else { console.error('Sign-in failed:', error); } } }; ``` ## Bonus: Verifying the Identity Token on the Backend The `identityToken` returned by [`signIn(...)`](../../sdks/capacitor/apple-sign-in.md#signin) is a JSON Web Token (JWT) signed by Apple. You should always verify it on your backend before trusting the information. This ensures the token was actually issued by Apple and hasn't been tampered with. To verify the token, fetch Apple's public keys from `https://appleid.apple.com/auth/keys` and validate the JWT signature and claims. Here's an example using the [jose](https://github.com/panva/jose){:target="_blank"} library for Node.js: ```typescript import { createRemoteJWKSet, jwtVerify } from 'jose'; const APPLE_JWKS_URL = new URL('https://appleid.apple.com/auth/keys'); const jwks = createRemoteJWKSet(APPLE_JWKS_URL); const verifyIdentityToken = async (identityToken: string) => { const { payload } = await jwtVerify(identityToken, jwks, { issuer: 'https://appleid.apple.com', audience: 'com.example.app', }); console.log('User ID:', payload.sub); console.log('Email:', payload.email); }; ``` The `audience` should match your app's **Bundle ID** (for tokens from iOS) or your **Service ID** (for tokens from Android and web). If your app uses both, verify against both values. ## FAQ ### Which platforms does the Capacitor Apple Sign-In plugin support? The plugin works on Android, iOS, and the web. On iOS it uses Apple's native Sign in with Apple framework, so no initialization is needed. On Android and the web it uses Apple's web-based OAuth flow, which is why you create a Service ID and pass it as the `clientId` in [`initialize(...)`](../../sdks/capacitor/apple-sign-in.md#initialize). ### Do I need an Apple Developer Program membership? Yes. Sign in with Apple requires an App ID with the capability enabled — and, for Android and web, a Service ID — both created in the Apple Developer Portal, which needs a paid Apple Developer Program membership. ### Why do I only receive the user's name and email on the first sign-in? Apple returns the user's name and email only on the very first authorization. Every subsequent sign-in omits these fields, so you must persist them on your backend right after the initial sign-in. See the warning under [Signing In](#signing-in). ### How do I handle the user cancelling the sign-in? When the user dismisses the dialog, the plugin throws an error with the code `SIGN_IN_CANCELED`. Catch it to tell an intentional cancel apart from a real failure, as shown in [Handling Errors](#handling-errors). ### Can I offer other sign-in methods alongside Apple? Yes. Add Google with the [Capacitor Google Sign-In plugin](../../sdks/capacitor/google-sign-in.md), or connect any other OpenID Connect provider — such as Auth0, Microsoft Entra ID, or Okta — with the [Capacitor OAuth plugin](../../sdks/capacitor/oauth.md). ## Related Posts - [Alternative to the Ionic Auth Connect Plugin](./alternative-to-ionic-auth-connect-plugin.md) - [Announcing the Capacitor OAuth Plugin](./announcing-the-capacitor-oauth-plugin.md) - [How to Sign In with Auth0 Using Capacitor](./how-to-sign-in-with-auth0-using-capacitor.md) - [How to Sign In with Azure Entra ID Using Capacitor](./how-to-sign-in-with-azure-entra-id-using-capacitor.md) ## Conclusion In this guide, we covered how to set up Apple Sign-In in a Capacitor app using the [Capacitor Apple Sign-In plugin](../../sdks/capacitor/apple-sign-in.md). From creating App IDs and Service IDs in the Apple Developer Portal to configuring platform-specific settings and implementing the sign-in flow, the plugin handles the complexity across Android, iOS, and web so you can focus on building your app. Explore the complete [API Reference](../../sdks/capacitor/apple-sign-in.md#api) to see all available methods and options. Have suggestions or questions? [Create an issue](https://github.com/capawesome-team/capacitor-plugins/issues/new/choose){:target="_blank"} in our [GitHub repository](https://github.com/capawesome-team/capacitor-plugins){:target="_blank"}. Stay connected with us on [X](https://x.com/capawesomeio){:target="_blank"} and subscribe to our [newsletter](/newsletter/){:target="_blank"} for the latest updates.