chore(demo): enable apple login (#5746)

demo/nextjs/.env.example

@@ -4,6 +4,8 @@ BETTER_AUTH_URL=
 BETTER_AUTH_SECRET=
 TURSO_DATABASE_URL=
 TURSO_AUTH_TOKEN=
+APPLE_CLIENT_ID=
+APPLE_CLIENT_SECRET=
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 RESEND_API_KEY=

demo/nextjs/components/sign-in.tsx

@@ -127,6 +127,30 @@ export default function SignIn() {
 							"justify-between flex-col",
 						)}
 					>
+						<Button
+							variant="outline"
+							className={cn("w-full gap-2 flex relative")}
+							onClick={async () => {
+								await signIn.social({
+									provider: "apple",
+									callbackURL: "/dashboard",
+								});
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="1em"
+								height="1em"
+								viewBox="0 0 24 24"
+							>
+								<path
+									fill="currentColor"
+									d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25"
+								></path>
+							</svg>
+							<span>Sign in with Apple</span>
+							{client.isLastUsedLoginMethod("apple") && <LastUsedIndicator />}
+						</Button>
 						<Button
 							variant="outline"
 							className={cn("w-full gap-2 flex relative")}

demo/nextjs/lib/auth.ts

@@ -106,6 +106,10 @@ export const auth = betterAuth({
 		},
 	},
 	socialProviders: {
+		apple: {
+			clientId: process.env.APPLE_CLIENT_ID || "",
+			clientSecret: process.env.APPLE_CLIENT_SECRET || "",
+		},
 		facebook: {
 			clientId: process.env.FACEBOOK_CLIENT_ID || "",
 			clientSecret: process.env.FACEBOOK_CLIENT_SECRET || "",