Here's a cleaned up sample of the code I am using:
`import React from 'react';
import $ from 'jquery';
import AppleSignin from 'react-apple-signin-auth';
import { appleAuthHelpers } from 'react-apple-signin-auth';
var randomNonce = '';
const responseApple = () => {
console.log('Called responseApple');
if (0 == randomNonce.length) {
randomNonce = randomString();
console.log('responseApple - randomNonce', randomNonce);
}
try {
return appleAuthHelpers.signIn({
authOptions: {
clientId: '<>',
redirectURI: '<>',
nonce: randomNonce,
usePopup: true,
},
onSuccess: (response) => console.log('responseApple - response', response), /* Will be appleSignInReturn */
onError: (error) => console.log('responseApple - error', error),
});
}
catch (error) {
console.log('responseApple - catch error', error);
//handle error.
}
}
class AppleSignInButton extends React.Component {
render() {
return (
);
}
}
export default AppleSignInButton;
const AppleSignInBtn = ({ ...rest }) => (
/** Apple Signin button /
<AppleSignin
/* Auth options passed to AppleID.auth.init() */
authOptions={{
clientId: '<>',
scope: 'name email',
redirectURI: '<>',
state: 'new_user',
nonce: randomNonce,
usePopup: true,
}}
/** General props */
uiType="light"
/** className */
className="apple-auth-btn"
/** Allows to change the button's children, eg: for changing the button text */
buttonExtraChildren=" Apple "
/** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side */
onSuccess={() => responseApple} // default = undefined
/** Called upon signin error */
onError={(error) => console.log('AppleSignInBtn onError error', error)} // default = undefined
/** Skips loading the apple script if true */
skipScript={false} // default = undefined
/** Checkout README.md for further customization props. */
/** Spread rest props if needed */
{...rest}
/>
);
function appleSignInReturn(appleData) {
console.log("AppleSignInReturn called");
console.log('appleData', appleData);
let signInSuccess = false;
let authData = (typeof appleData.authorization !== "undefined") ? appleData.authorization : [];
let rtnToken = (typeof authData.id_token !== "undefined") ? authData.id_token : '';
let tokenData = parseJwt(rtnToken);
let rtnNonce = (typeof tokenData.nonce !== "undefined") ? tokenData.nonce : '';
console.log('appleSignInReturn - rtnNonce', rtnNonce, 'randomNonce', randomNonce);
if (rtnNonce == randomNonce) {
//console.log('appleSignInReturn - Nonces match');
}
else {
//TODO: SIGN IN FAIL...?
}
let appleEmail = (typeof tokenData.email !== "undefined") ? tokenData.email : '';
let appleEmailVer = 0;
if (typeof tokenData.email_verified !== "undefined" && tokenData.email_verified === 'true') {
appleEmailVer = 1;
}
console.log('appleSignInReturn - appleEmailVer', appleEmailVer);
let userData = (typeof appleData.user !== "undefined") ? appleData.user : [];
console.log('appleSignInReturn - userData', userData);
let rtnName = (typeof userData.name !== "undefined") ? userData.name : [];
console.log('appleSignInReturn - rtnName', rtnName);
let appleFName = (typeof rtnName.firstName !== "undefined") ? rtnName.firstName : '';
let appleLName = (typeof rtnName.lastName !== "undefined") ? rtnName.lastName : '';
console.log('appleSignInReturn - appleFName', appleFName, 'appleLName', appleLName);
if (appleFName.length > 0 && appleLName.length > 0) {
signInSuccess = true;
}
if (appleEmail.length == 0 && typeof userData.email !== "undefined") {
appleEmail = userData.email;
console.log('appleSignInReturn - appleEmail', appleEmail);
}
if (appleEmail.length > 0) {
signInSuccess = true;
}
if (signInSuccess) {
console.log("Should start updating Apple fields - First name", appleFName);
<> }
}
/************************************************************************/
function parseJwt(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
function randomString() {
//define a variable consisting alphabets in small and capital letter, plus numerical digits
let characters = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz0123456789";
//specify the length for the new string
let lenString = 7;
let rNum = 0;
let rtnString = '';
//loop to select a new character in each iteration
for (var i = 0; i < lenString; i++) {
rNum = Math.floor(Math.random() * characters.length);
rtnString += characters.substring(rNum, rNum + 1);
}
//display the generated string
return rtnString;
}
`
