diff --git a/apps/wallet/ios/Podfile.lock b/apps/wallet/ios/Podfile.lock
index f72248a06..65a5843d8 100644
--- a/apps/wallet/ios/Podfile.lock
+++ b/apps/wallet/ios/Podfile.lock
@@ -564,6 +564,8 @@ PODS:
     - React-logger (= 0.71.14)
     - React-perflogger (= 0.71.14)
   - RecaptchaInterop (100.0.0)
+  - RNAppleAuthentication (2.3.0):
+    - React-Core
   - RNCClipboard (1.13.2):
     - React-Core
   - RNCustomAuthSdk (4.0.1):
@@ -686,6 +688,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../../../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../../../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - "RNAppleAuthentication (from `../../../node_modules/@invertase/react-native-apple-authentication`)"
   - "RNCClipboard (from `../../../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCustomAuthSdk (from `../../../node_modules/@toruslabs/customauth-react-native-sdk`)"
   - RNDeviceInfo (from `../../../node_modules/react-native-device-info`)
@@ -836,6 +839,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
+  RNAppleAuthentication:
+    :path: "../../../node_modules/@invertase/react-native-apple-authentication"
   RNCClipboard:
     :path: "../../../node_modules/@react-native-clipboard/clipboard"
   RNCustomAuthSdk:
@@ -957,6 +962,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: ffe826b7b1cfbc32a35ed5b64d5886c0ff75f501
   ReactCommon: 6f0ee30fda78283c31310e585f7236748e13330d
   RecaptchaInterop: 7d1a4a01a6b2cb1610a47ef3f85f0c411434cb21
+  RNAppleAuthentication: e99eaf3c4c01ad8ecb6125dd6f0cfd98871685b5
   RNCClipboard: 60fed4b71560d7bfe40e9d35dea9762b024da86d
   RNCustomAuthSdk: e1db0c850b41deaf38fdc8fe5433b3287db29c55
   RNDeviceInfo: db5c64a060e66e5db3102d041ebe3ef307a85120
diff --git a/apps/wallet/package.json b/apps/wallet/package.json
index af7495bda..6c841b446 100644
--- a/apps/wallet/package.json
+++ b/apps/wallet/package.json
@@ -23,6 +23,7 @@
     "@craftzdog/pouchdb-collate-react-native": "^7.3.0",
     "@craftzdog/react-native-buffer": "^6.0.5",
     "@dreson4/react-native-quick-bip39": "0.0.5",
+    "@invertase/react-native-apple-authentication": "^2.3.0",
     "@metacraft/cli-web3-polyfills": "^0.0.7",
     "@metaplex-foundation/js": "^0.19.4",
     "@mysten/sui.js": "0.34.0",
@@ -75,6 +76,7 @@
     "pouchdb-mapreduce": "^8.0.1",
     "pouchdb-replication": "^8.0.1",
     "react": "^18.2.0",
+    "react-apple-signin-auth": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-native": "0.71.14",
     "react-native-biometrics": "^3.0.1",
diff --git a/apps/wallet/src/screens/Authentication/Login/SignInInner.tsx b/apps/wallet/src/screens/Authentication/Login/SignInInner.tsx
index 398eb7d8b..1096034ef 100644
--- a/apps/wallet/src/screens/Authentication/Login/SignInInner.tsx
+++ b/apps/wallet/src/screens/Authentication/Login/SignInInner.tsx
@@ -1,25 +1,45 @@
 import type { FC } from 'react';
+import { Fragment } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
+import { appleAuthAndroid } from '@invertase/react-native-apple-authentication';
+import { runtime } from '@walless/core';
 import { Button, Text, View } from '@walless/gui';
-import { Google } from '@walless/icons';
+import { Apple, Google } from '@walless/icons';
 
 interface Props {
 	onGoogleSignIn?: () => void;
+	onAppleSignIn?: () => void;
 	loading?: boolean;
 	onGetInvitationCode?: () => void;
 }
 
-const SignInInner: FC<Props> = ({ onGoogleSignIn, loading }) => {
+const SignInInner: FC<Props> = ({ onGoogleSignIn, onAppleSignIn, loading }) => {
+	const isAppleSignInSupported = runtime.isIOS || appleAuthAndroid.isSupported;
+
 	return (
 		<View style={styles.container}>
 			<View style={styles.commandContainer}>
 				{loading ? (
 					<ActivityIndicator color="white" />
 				) : (
-					<Button style={styles.signInButton} onPress={onGoogleSignIn}>
-						<Google />
-						<Text style={styles.buttonText}>Sign in with Google</Text>
-					</Button>
+					<Fragment>
+						<Button style={styles.signInButton} onPress={onGoogleSignIn}>
+							<Google />
+							<Text style={styles.buttonText}>Sign in with Google</Text>
+						</Button>
+
+						{isAppleSignInSupported && (
+							<Button
+								style={[styles.signInButton, styles.appleButton]}
+								onPress={onAppleSignIn}
+							>
+								<Apple color="black" />
+								<Text style={[styles.buttonText, styles.appleButtonText]}>
+									Sign in with Apple
+								</Text>
+							</Button>
+						)}
+					</Fragment>
 				)}
 			</View>
 
@@ -50,10 +70,10 @@ const styles = StyleSheet.create({
 	},
 	commandContainer: {
 		justifyContent: 'center',
+		gap: 24,
 	},
 	signInButton: {
 		flexDirection: 'row',
-		backgroundColor: '#0694D3',
 		gap: 8,
 	},
 	buttonText: {
@@ -61,6 +81,12 @@ const styles = StyleSheet.create({
 		fontWeight: '500',
 		color: 'white',
 	},
+	appleButton: {
+		backgroundColor: 'white',
+	},
+	appleButtonText: {
+		color: 'black',
+	},
 	advancedModeContainer: {
 		gap: 24,
 	},
diff --git a/apps/wallet/src/screens/Authentication/Login/SignInInner.web.tsx b/apps/wallet/src/screens/Authentication/Login/SignInInner.web.tsx
new file mode 100644
index 000000000..a283704ff
--- /dev/null
+++ b/apps/wallet/src/screens/Authentication/Login/SignInInner.web.tsx
@@ -0,0 +1,140 @@
+import type { FC } from 'react';
+import { Fragment } from 'react';
+import AppleSignin from 'react-apple-signin-auth';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { logger } from '@walless/core';
+import { Button, Text, View } from '@walless/gui';
+import { Apple, Google } from '@walless/icons';
+
+interface Props {
+	onGoogleSignIn?: () => void;
+	onAppleSignIn?: () => void;
+	loading?: boolean;
+	onGetInvitationCode?: () => void;
+}
+
+const SignInInner: FC<Props> = ({ onGoogleSignIn, loading }) => {
+	return (
+		<View style={styles.container}>
+			<View style={styles.commandContainer}>
+				{loading ? (
+					<ActivityIndicator color="white" />
+				) : (
+					<Fragment>
+						<Button style={styles.signInButton} onPress={onGoogleSignIn}>
+							<Google />
+							<Text style={styles.buttonText}>Sign in with Google</Text>
+						</Button>
+
+						<AppleSignin
+							authOptions={{
+								clientId: 'Config.APPLE_SIGNIN_CLIENT_ID',
+								redirectURI: 'metacraft://walless/auth',
+								scope: 'email name',
+								state: crypto.randomUUID(),
+								nonce: crypto.randomUUID(),
+								usePopup: true,
+							}}
+							onSuccess={(response) => {
+								// Response
+								// {
+								//     "authorization": {
+								//       "state": "[STATE]",
+								//       "code": "[CODE]",
+								//       "id_token": "[ID_TOKEN]"
+								//     },
+								//     "user": {
+								//       "email": "[EMAIL]",
+								//       "name": {
+								//         "firstName": "[FIRST_NAME]",
+								//         "lastName": "[LAST_NAME]"
+								//       }
+								//     }
+								// }
+
+								console.log('--> apple sign-in on web', response);
+							}}
+							onError={(e) => logger.error(e)}
+							uiType="light"
+							render={({ onClick }) => (
+								<Button
+									style={[styles.signInButton, styles.appleButton]}
+									onPress={onClick}
+								>
+									<Apple color="black" />
+									<Text style={[styles.buttonText, styles.appleButtonText]}>
+										Sign in with Apple
+									</Text>
+								</Button>
+							)}
+						/>
+					</Fragment>
+				)}
+			</View>
+
+			<View style={styles.advancedModeContainer}>
+				<View style={styles.separateContainer}>
+					<View style={styles.line} />
+					<Text style={styles.subText}>Advanced mode</Text>
+					<View style={styles.line} />
+				</View>
+
+				<Button
+					style={styles.seedPhraseButton}
+					disabled
+					title="Create or Import"
+					titleStyle={styles.buttonText}
+				/>
+			</View>
+		</View>
+	);
+};
+
+export default SignInInner;
+
+const styles = StyleSheet.create({
+	container: {
+		gap: 28,
+		paddingHorizontal: 36,
+	},
+	commandContainer: {
+		justifyContent: 'center',
+		gap: 24,
+	},
+	signInButton: {
+		flexDirection: 'row',
+		gap: 8,
+	},
+	buttonText: {
+		fontSize: 16,
+		fontWeight: '500',
+		color: 'white',
+	},
+	appleButton: {
+		backgroundColor: 'white',
+	},
+	appleButtonText: {
+		color: 'black',
+	},
+	advancedModeContainer: {
+		gap: 24,
+	},
+	separateContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 16,
+	},
+	line: {
+		flex: 1,
+		height: 1,
+		backgroundColor: '#2A333C',
+	},
+	seedPhraseButton: {
+		backgroundColor: '#243F56',
+	},
+	subText: {
+		fontSize: 14,
+		color: '#566674',
+		fontWeight: '400',
+	},
+});
diff --git a/apps/wallet/src/screens/Authentication/Login/index.tsx b/apps/wallet/src/screens/Authentication/Login/index.tsx
index d781aab16..30987426e 100644
--- a/apps/wallet/src/screens/Authentication/Login/index.tsx
+++ b/apps/wallet/src/screens/Authentication/Login/index.tsx
@@ -6,7 +6,7 @@ import { appState } from 'state/app';
 import assets from 'utils/assets';
 import { useSafeAreaInsets, useSnapshot } from 'utils/hooks';
 
-import { signIn } from './internal';
+import { signIn, SignInMethod } from './internal';
 import SignInHeader from './SignInHeader';
 import SignInInner from './SignInInner';
 
@@ -20,17 +20,24 @@ export const LoginScreen: FC = () => {
 	};
 	const logoSize = 120;
 
-	const handleGoogleSignIn = async () => {
+	const handleSignIn = async (method: SignInMethod) => {
 		setLoading(true);
-		await signIn(invitationCode);
+		await signIn(invitationCode, method);
 		setLoading(false);
 	};
 
 	return (
 		<View style={[styles.container, containerStyle]}>
 			<View />
+
 			<SignInHeader logoSrc={assets.misc.walless} logoSize={logoSize} />
-			<SignInInner onGoogleSignIn={handleGoogleSignIn} loading={loading} />
+
+			<SignInInner
+				onGoogleSignIn={() => handleSignIn(SignInMethod.Google)}
+				onAppleSignIn={() => handleSignIn(SignInMethod.Apple)}
+				loading={loading}
+			/>
+
 			<View style={styles.footerContainer}>
 				<View style={styles.helpContainer}>
 					<Text>Having issues with log in? Visit </Text>
diff --git a/apps/wallet/src/screens/Authentication/Login/internal.ts b/apps/wallet/src/screens/Authentication/Login/internal.ts
index 2f160175f..e79c2b576 100644
--- a/apps/wallet/src/screens/Authentication/Login/internal.ts
+++ b/apps/wallet/src/screens/Authentication/Login/internal.ts
@@ -2,6 +2,7 @@ import { logger } from '@walless/core';
 import { showError } from 'modals/Error';
 import {
 	checkInvitationCode,
+	signInWithApple,
 	signInWithGoogle,
 	signInWithTorusKey,
 	ThresholdResult,
@@ -9,13 +10,28 @@ import {
 import type { FirebaseUser } from 'utils/firebase';
 import { navigate } from 'utils/navigation';
 
-export const signIn = async (invitationCode?: string) => {
+export enum SignInMethod {
+	Google = 'Google',
+	Apple = 'Apple',
+}
+
+export const signIn = async (
+	invitationCode?: string,
+	method: SignInMethod = SignInMethod.Google,
+) => {
 	let user: FirebaseUser;
+
 	try {
-		user = await signInWithGoogle();
+		if (method === SignInMethod.Google) {
+			user = await signInWithGoogle();
+		} else if (method === SignInMethod.Apple) {
+			user = await signInWithApple();
+		} else {
+			throw new Error('Unsupported sign-in method');
+		}
 	} catch (error) {
 		showError({ errorText: 'Something went wrong' });
-		logger.error('Error when sign-in with google', error);
+		logger.error(`Error when sign-in with ${method}`, error);
 		return;
 	}
 
diff --git a/apps/wallet/src/utils/auth/signIn.ts b/apps/wallet/src/utils/auth/signIn.ts
index e9eefd41e..088224748 100644
--- a/apps/wallet/src/utils/auth/signIn.ts
+++ b/apps/wallet/src/utils/auth/signIn.ts
@@ -7,6 +7,7 @@ import { CustomAuth, initServiceProvider } from './w3a/tkey';
 import { initBySeedPhraseModule } from './keys';
 import { initAndRegisterWallet } from './recovery';
 import { signInWithGoogle } from './signInGoogle';
+import { signInWithApple } from './signInWithApple';
 import {
 	customAuthArgs,
 	importAvailableShares,
@@ -88,6 +89,7 @@ const signInWithPasscode = async (
 
 export {
 	checkInvitationCode,
+	signInWithApple,
 	signInWithGoogle,
 	signInWithPasscode,
 	signInWithTorusKey,
diff --git a/apps/wallet/src/utils/auth/signInWithApple.ts b/apps/wallet/src/utils/auth/signInWithApple.ts
new file mode 100644
index 000000000..a1f8455f8
--- /dev/null
+++ b/apps/wallet/src/utils/auth/signInWithApple.ts
@@ -0,0 +1,71 @@
+import {
+	appleAuth,
+	appleAuthAndroid,
+} from '@invertase/react-native-apple-authentication';
+import { runtime } from '@walless/core';
+import type { FirebaseUser } from 'utils/firebase';
+
+import { auth } from './../firebase';
+
+export const signInWithApple = async () => {
+	if (runtime.isIOS) {
+		return await signInWithAppleOnIOS();
+	} else if (appleAuthAndroid.isSupported) {
+		return await signInWithAppleOnAndroid();
+	} else {
+		throw new Error('Platform not supports Apple sign-in');
+	}
+};
+
+export const signInWithAppleOnIOS = async (): Promise<FirebaseUser> => {
+	const appleAuthRequestResponse = await appleAuth.performRequest({
+		requestedOperation: appleAuth.Operation.LOGIN,
+		requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL],
+	});
+	const { identityToken: idToken, nonce } = appleAuthRequestResponse;
+	const appleCredential = auth.AppleAuthProvider.credential(idToken, nonce);
+	const { user } = await auth().signInWithCredential(appleCredential);
+
+	return user;
+};
+
+export const signInWithAppleOnAndroid = async (): Promise<FirebaseUser> => {
+	const rawNonce = crypto.randomUUID();
+	const state = crypto.randomUUID();
+
+	appleAuthAndroid.configure({
+		// The Service ID you registered with Apple
+		// TODO: we should have a Config.APPLE_SIGNIN_CLIENT_ID instead
+		// https://developer.apple.com/help/account/configure-app-capabilities/configure-sign-in-with-apple-for-the-web/
+		clientId: 'Config.APPLE_SIGNIN_CLIENT_ID',
+
+		// Return URL added to your Apple dev console. We intercept this redirect, but it must still match
+		// the URL you provided to Apple. It can be an empty route on your backend as it's never called.
+		redirectUri: 'metacraft://walless/auth',
+
+		// The type of response requested - code, id_token, or both.
+		responseType: appleAuthAndroid.ResponseType.ALL,
+
+		// The amount of user information requested from Apple.
+		scope: appleAuthAndroid.Scope.ALL,
+
+		// Random nonce value that will be SHA256 hashed before sending to Apple.
+		nonce: rawNonce,
+
+		// Unique state value used to prevent CSRF attacks. A UUID will be generated if nothing is provided.
+		state,
+	});
+
+	const { id_token: idToken, nonce } = await appleAuthAndroid.signIn();
+
+	if (!idToken || !nonce) {
+		throw new Error(
+			'Found undefined idToken or nonce when sign-in with Apple on Android',
+		);
+	}
+
+	const appleCredential = auth.AppleAuthProvider.credential(idToken, nonce);
+	const { user } = await auth().signInWithCredential(appleCredential);
+
+	return user;
+};
diff --git a/apps/wallet/src/utils/auth/signInWithApple.web.ts b/apps/wallet/src/utils/auth/signInWithApple.web.ts
new file mode 100644
index 000000000..ff154219e
--- /dev/null
+++ b/apps/wallet/src/utils/auth/signInWithApple.web.ts
@@ -0,0 +1,3 @@
+import type { FirebaseUser } from 'utils/firebase';
+
+export const signInWithApple = async (): Promise<FirebaseUser> => {};
diff --git a/packages/icons/components/Apple.tsx b/packages/icons/components/Apple.tsx
new file mode 100644
index 000000000..cf0606e5c
--- /dev/null
+++ b/packages/icons/components/Apple.tsx
@@ -0,0 +1,27 @@
+import type { FC } from 'react';
+import { G, Path, Svg } from 'react-native-svg';
+
+import type { IconProps } from './types';
+
+export const Apple: FC<IconProps> = ({ size = 20, color = '#FFFFFF' }) => {
+	return (
+		<Svg fill={color} height={size} width={size} viewBox="0 0 22.773 22.773">
+			<G>
+				<Path
+					d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
+			c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"
+				/>
+				<Path
+					d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
+			c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
+			c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
+			c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
+			c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
+			c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"
+				/>
+			</G>
+		</Svg>
+	);
+};
+
+export default Apple;
diff --git a/packages/icons/index.ts b/packages/icons/index.ts
index 68c59a7e8..eb2704ea2 100644
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@@ -1,4 +1,5 @@
 export { AlertCircle } from './components/AlertCircle';
+export { Apple } from './components/Apple';
 export { ArrowBottomRight } from './components/ArrowBottomRight';
 export { ArrowDown } from './components/ArrowDown';
 export { ArrowRight } from './components/ArrowRight';
diff --git a/yarn.lock b/yarn.lock
index 335c42de0..df732ea6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5753,6 +5753,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@invertase/react-native-apple-authentication@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@invertase/react-native-apple-authentication@npm:2.3.0"
+  checksum: 7e70b69cdf61c81e955392fa63827dd675a7c1ae029683f21f1f591cf4564d6ca277a55e594b4a3c1636bbf056bf32ceffe699ea1da20f3fa90d00ab6422b4b0
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -11452,6 +11459,7 @@ __metadata:
     "@craftzdog/pouchdb-collate-react-native": ^7.3.0
     "@craftzdog/react-native-buffer": ^6.0.5
     "@dreson4/react-native-quick-bip39": 0.0.5
+    "@invertase/react-native-apple-authentication": ^2.3.0
     "@metacraft/cli-web3-polyfills": ^0.0.7
     "@metaplex-foundation/js": ^0.19.4
     "@mysten/sui.js": 0.34.0
@@ -11513,6 +11521,7 @@ __metadata:
     pouchdb-mapreduce: ^8.0.1
     pouchdb-replication: ^8.0.1
     react: ^18.2.0
+    react-apple-signin-auth: ^1.1.0
     react-dom: ^18.2.0
     react-native: 0.71.14
     react-native-biometrics: ^3.0.1
@@ -23284,6 +23293,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-apple-signin-auth@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "react-apple-signin-auth@npm:1.1.0"
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 3b820c27a20b389b98f29cd77f9bbddb4c14d8b69bd7ea1b604ecc686d122aa1c93e2f63396e46171d51be3f9af53f68a95ac418f215f12ea3c7ecff3b4578a5
+  languageName: node
+  linkType: hard
+
 "react-devtools-core@npm:^4.26.1":
   version: 4.28.5
   resolution: "react-devtools-core@npm:4.28.5"