I am sending a user to the apple authentication site where they fill in their apple login information on a form:
const signInWithApple = () => {
const params = {
client_id: Config.APPLE_AUTH_CLIENT_ID,
redirect_uri: 'https://www.example-site.com/auth/apple/',
scope: 'name email',
response_type: 'code',
response_mode: 'form_post',
};
const loginUrl = `https://appleid.apple.com/auth/authorize?${queryString.stringify(params)}`;
window.open(loginUrl, '_blank', `scrollbars=yes, width=520, height=570`);
};
After it has authenticated the user, it redirects the user to the URL that is defined in the redirect_uri property. Then I verify the token and log in the user on my end. That works beautifully.
The problem occurs when, instead of opening the window with the form fields, it opens a sheet at the bottom of the Safari mobile browser to allow the user to use face id. If you follow through with that, it looks like it recognizes your face and closes the sheet but it never redirects the user to my URL page where I log in the user after verifying their token.
Has anybody encountered this? I would love some ideas on how to solve this please!
Finally, I use apple auth js sdk to solve this problem, just for safari🥲
Document is here:
// add this script to your website
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/zh_CN/appleid.auth.js"></script>
// or en_US
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
// init sdk
window.AppleID.auth.init({
clientId: YOUR_APPLE_CLIENT_ID,
scope: 'name email',
redirectURI: redirectUrl,
state: state,
nonce: String(Date.now()),
usePopup: true,
})
// get auth
const {
authorization: { code, id_token, state },
user,
} = await window.AppleID.auth.signIn()