app.ios.js

/* eslint-disable no-console */
/**
 * Copyright (c) 2016-present Invertase Limited & Contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this library except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import { appleAuth, AppleButton, AppleAuthWebView } from '@invertase/react-native-apple-authentication';
import { getAppleAuthConfig, parseAppleAuthResponse } from './app.shared';

/**
 * You'd technically persist this somewhere for later use.
 */
let user = null;

/**
 * Fetches the credential state for the current user, if any, and updates state on completion.
 */
async function fetchAndUpdateCredentialState(updateCredentialStateForUser) {
  if (user === null) {
    updateCredentialStateForUser('N/A');
  } else {
    const credentialState = await appleAuth.getCredentialStateForUser(user);
    if (credentialState === appleAuth.State.AUTHORIZED) {
      updateCredentialStateForUser('AUTHORIZED');
    } else {
      updateCredentialStateForUser(credentialState);
    }
  }
}

/**
 * Starts the Sign In flow.
 */
async function onAppleButtonPress(updateCredentialStateForUser) {
  console.warn('Beginning Apple Authentication');

  // start a login request
  try {
    const appleAuthRequestResponse = await appleAuth.performRequest({
      requestedOperation: appleAuth.Operation.LOGIN,
      requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
    });

    console.log('appleAuthRequestResponse', appleAuthRequestResponse);

    const {
      user: newUser,
      email,
      nonce,
      identityToken,
      realUserStatus /* etc */,
    } = appleAuthRequestResponse;

    user = newUser;

    fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
      updateCredentialStateForUser(`Error: ${error.code}`),
    );

    if (identityToken) {
      // e.g. sign in with Firebase Auth using `nonce` & `identityToken`
      console.log(nonce, identityToken);
    } else {
      // no token - failed sign-in?
    }

    if (realUserStatus === appleAuth.UserStatus.LIKELY_REAL) {
      console.log("I'm a real person!");
    }

    console.warn(`Apple Authentication Completed, ${user}, ${email}`);
  } catch (error) {
    if (error.code === appleAuth.Error.CANCELED) {
      console.warn('User canceled Apple Sign in.');
    } else {
      console.error(error);
    }
  }
}

export default function RootComponent() {
  const [credentialStateForUser, updateCredentialStateForUser] = useState(-1);
  const [appleAuthConfig, setAppleAuthConfig] = useState(null);

  useEffect(() => {
    if (!appleAuth.isSupported) return;

    fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
      updateCredentialStateForUser(`Error: ${error.code}`),
    );
  }, []);

  useEffect(() => {
    if (!appleAuth.isSupported) return;

    return appleAuth.onCredentialRevoked(async () => {
      console.warn('Credential Revoked');
      fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
        updateCredentialStateForUser(`Error: ${error.code}`),
      );
    });
  }, []);

  if (appleAuthConfig) {
    return (
      <AppleAuthWebView
        config={appleAuthConfig}
        onResponse={
          (responseContent) => {
            setAppleAuthConfig(null);
            parseAppleAuthResponse(responseContent);
          }
        }
      />
    );
  }

  return (
    <View style={[styles.container, styles.horizontal]}>
      {
        appleAuth.isSupported && (
          <View>
            <Text style={styles.header}>Credential State</Text>
            <Text>{credentialStateForUser}</Text>

            <Text style={styles.header}>Buttons</Text>
            <Text>Continue Styles</Text>
            <AppleButton
              style={styles.appleButton}
              cornerRadius={5}
              buttonStyle={AppleButton.Style.WHITE}
              buttonType={AppleButton.Type.CONTINUE}
              onPress={() => onAppleButtonPress(updateCredentialStateForUser)}
            />
            <AppleButton
              style={styles.appleButton}
              cornerRadius={5}
              buttonStyle={AppleButton.Style.WHITE_OUTLINE}
              buttonType={AppleButton.Type.CONTINUE}
              onPress={() => onAppleButtonPress(updateCredentialStateForUser)}
            />
            <AppleButton
              style={styles.appleButton}
              cornerRadius={5}
              buttonStyle={AppleButton.Style.BLACK}
              buttonType={AppleButton.Type.CONTINUE}
              onPress={() => onAppleButtonPress(updateCredentialStateForUser)}
            />
            <Text>Sign-in Styles</Text>
            <AppleButton
              style={styles.appleButton}
              cornerRadius={5}
              buttonStyle={AppleButton.Style.WHITE}
              buttonType={AppleButton.Type.SIGN_IN}
              onPress={() => onAppleButtonPress(updateCredentialStateForUser)}
            />
            <AppleButton
              style={styles.appleButton}
              cornerRadius={5}
              buttonStyle={AppleButton.Style.WHITE_OUTLINE}
              buttonType={AppleButton.Type.SIGN_IN}
              onPress={() => onAppleButtonPress(updateCredentialStateForUser)}
            />
            <AppleButton
              style={styles.appleButton}
              cornerRadius={5}
              buttonStyle={AppleButton.Style.BLACK}
              buttonType={AppleButton.Type.SIGN_IN}
              onPress={() => onAppleButtonPress(updateCredentialStateForUser)}
            />
          </View>
        )
      }

      {
        !appleAuth.isSupported && (
          <View>
            <Text>
              Apple Authentication is not supported on this device.
            </Text>
            <Text>
              But in such cases you can always use apple webView sign in!
            </Text>
          </View>
        )
      }

      {
        <TouchableOpacity onPress={
          () => {
            setAppleAuthConfig(getAppleAuthConfig());
          }
        }>
          <View style={styles.button}>
            <Text style={styles.label}>
              WebView sign in with Apple
            </Text>
          </View>
        </TouchableOpacity>
      }
    </View>
  );
}

const styles = StyleSheet.create({
  appleButton: {
    width: 200,
    height: 60,
    margin: 10,
  },
  header: {
    margin: 10,
    marginTop: 30,
    fontSize: 18,
    fontWeight: '600',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'pink',
  },
  horizontal: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
});