# react-native-apple-authentication
**Repository Path**: Jiayao_Wu/react-native-apple-authentication
## Basic Information
- **Project Name**: react-native-apple-authentication
- **Description**: A React Native library providing support for Apple Authentication on iOS.
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-13
- **Last Updated**: 2024-06-03
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
React Native Apple Authentication
---
A well typed React Native library providing support for Apple Authentication on iOS, including support for all `AppleButton` variants.
## Prerequisites to using this library
The `@invertase/react-native-apple-authentication` library will not work if you do not ensure the following:
- You have setup react-native iOS development environment on your machine (Will only work on Mac). If not, please follow the official React Native documentation for getting started: [React Native getting started documentation](https://facebook.github.io/react-native/docs/getting-started).
- You are using React Native version `0.60` or higher.
- You are using Xcode version `11` or higher. This will allow you to develop using iOS version `13`, the only version possible for authenticating with Apple.
- **Once you're sure you've met the above, please follow our [Initial development environment setup](docs/INITIAL_SETUP.md) guide.**
## Installation
```bash
yarn add @invertase/react-native-apple-authentication
```
You will not have to manually link this module as it supports React Native auto-linking.
## Usage
Below are simple steps to help you get up and running. Please skip and head to the full code examples noted below if you prefer to see a more complete implementation:
- [React Hooks example](example/app.js)
- [React Class example](example/classVersion.js)
- If you're authenticating users via `React Native Firebase`; see our [Firebase guide](docs/FIREBASE.md)
#### 1. Initial set-up
Import the `appleAuth` ([API documentation](docs/interfaces/_lib_index_d_.rnappleauth.module.md)) module and the `AppleButton` ([API documentation](docs/interfaces/_lib_index_d_.rnappleauth.applebuttonprops.md)) exported member element from the `@invertase/react-native-apple-authentication` library. Setup an event handler (`onPress`) to kick start the authentication request.
```js
// App.js
import React from 'react';
import { View } from 'react-native';
import { AppleButton } from '@invertase/react-native-apple-authentication';
async function onAppleButtonPress() {
}
function App() {
return (
onAppleButtonPress()}
/>
);
}
```
#### 2. Implement the login process
Import exported members `AppleAuthRequestOperation` ([API documentation](docs/enums/_lib_index_d_.rnappleauth.appleauthrequestoperation.md)), `AppleAuthRequestScope` [API documentation](docs/enums/_lib_index_d_.rnappleauth.appleauthrequestscope.md) & `AppleAuthCredentialState` [API documentation](docs/enums/_lib_index_d_.rnappleauth.appleauthcredentialstate.md).
```js
// App.js
import appleAuth, {
AppleButton,
AppleAuthRequestOperation,
AppleAuthRequestScope,
AppleAuthCredentialState,
} from '@invertase/react-native-apple-authentication';
async function onAppleButtonPress() {
// performs login request
const appleAuthRequestResponse = await appleAuth.performRequest({
requestedOperation: AppleAuthRequestOperation.LOGIN,
requestedScopes: [AppleAuthRequestScope.EMAIL, AppleAuthRequestScope.FULL_NAME],
});
// get current authentication state for user
const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
// use credentialState response to ensure the user is authenticated
if (credentialState === AppleAuthCredentialState.AUTHORIZED) {
// user is authenticated
}
}
```
#### 3. Event Listener
Set up event listener for when user's credentials have been revoked.
```js
// App.js
import React, { useEffect } from 'react';
import { View } from 'react-native';
import appleAuth, { AppleButton } from '@invertase/react-native-apple-authentication';
function App() {
useEffect(() => {
// onCredentialRevoked returns a function that will remove the event listener. useEffect will call this function when the component unmounts
return appleAuth.onCredentialRevoked(async () => {
console.warn('If this function executes, User Credentials have been Revoked');
});
}, []); // passing in an empty array as the second argument ensures this is only ran once when component mounts initially.
return (
onAppleButtonPress()} />
);
}
```
#### 4. Implement the logout process
```js
// App.js
import { View, Button } from 'react-native';
import appleAuth, {
AppleAuthRequestOperation,
AppleAuthCredentialState,
} from '@invertase/react-native-apple-authentication';
async function onLogout() {
// performs logout request
const appleAuthRequestResponse = await appleAuth.performRequest({
requestedOperation: AppleAuthRequestOperation.LOGOUT,
});
// get current authentication state for user
const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
// use credentialState response to ensure the user credential's have been revoked
if (credentialState === AppleAuthCredentialState.REVOKED) {
// user is unauthenticated
}
}
function App() {
return (
);
}
```
## API Reference Documentation
### Interfaces
- [appleAuth module](docs/interfaces/_lib_index_d_.rnappleauth.module.md)
- [AppleAuthRequestOptions](docs/interfaces/_lib_index_d_.rnappleauth.appleauthrequestoptions.md)
- [AppleAuthRequestResponse](docs/interfaces/_lib_index_d_.rnappleauth.appleauthrequestresponse.md)
- [AppleAuthRequestResponseFullName](docs/interfaces/_lib_index_d_.rnappleauth.appleauthrequestresponsefullname.md)
- [AppleButtonProps](docs/interfaces/_lib_index_d_.rnappleauth.applebuttonprops.md)
### Enumerations
- [AppleAuthCredentialState](docs/enums/_lib_index_d_.rnappleauth.appleauthcredentialstate.md)
- [AppleAuthError](docs/enums/_lib_index_d_.rnappleauth.appleautherror.md)
- [AppleAuthRealUserStatus](docs/enums/_lib_index_d_.rnappleauth.appleauthrealuserstatus.md)
- [AppleAuthRequestOperation](docs/enums/_lib_index_d_.rnappleauth.appleauthrequestoperation.md)
- [AppleAuthRequestScope](docs/enums/_lib_index_d_.rnappleauth.appleauthrequestscope.md)
- [AppleButtonStyle](docs/enums/_lib_index_d_.rnappleauth.applebuttonstyle.md)
- [AppleButtonType](docs/enums/_lib_index_d_.rnappleauth.applebuttontype.md)
### FAQs
1. Why does `full name` and `email` return `null`?
- Apple only returns the `full name` and `email` on the first login, it will return `null` on the succeeding login so you need to save those data.
- For testing purposes, to be receive these again, go to your device settings; `Settings > Apple ID, iCloud, iTunes & App Store > Password & Security > Apps Using Your Apple ID`, tap on your app and tap `Stop Using Apple ID`. You can now sign-in again and you'll receive the `full name` and `email.
## License
- See [LICENSE](/LICENSE)
---
