I understand that capacitor-oauth2 does not support Apple Auth on the web. This becomes a bit of a dealbreaker since users can signup via Apple on iOS, then would be unable to log in on the web.
For anyone who may be experiencing this issue, here is some code that may assist you:
<!-- Apple Auth -->
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
let appleIDSignOnSuccessListener;
let appleIDSignInOnFailureListener;
let oauthResponse = async (oauthResponse) => {
// Process oauthResponse data
console.log(oauthResponse);
}
const appleSignin = async () => {
if (!Capacitor.isNativePlatform() && typeof window.AppleID !== 'undefined') {
// Specifically for Apple Web, we must do this manually and not use @byteowls/capacitor-oauth2
// Setup listeners
appleIDSignOnSuccessListener = async (event) => {
// Handle success
await oauthResponse(event.detail.authorization);
}
document.addEventListener('AppleIDSignInOnSuccess', appleIDSignOnSuccessListener);
appleIDSignInOnFailureListener = async (event) => {
// Handle error
console.log(event.detail);
}
document.addEventListener('AppleIDSignInOnFailure', appleIDSignInOnFailureListener);
//
// Init Apple
window.AppleID.auth.init({
clientId : config.clientId,
scope : 'name email',
redirectURI : config.redirectUrl,
usePopup : true
});
// Call Sign In
await window.AppleID.auth.signIn();
} else {
// Apple native iOS with @byteowls/capacitor-oauth2
// Set popup placement
const windowWidth = 600;
const windowHeight = 600;
const windowLeft = (window.screen.width / 2) - (windowWidth / 2);
const windowTop = (window.screen.height / 2) - (windowHeight / 2);
const windowOptions = `toolbar=no, menubar=no, width=${windowWidth}, height=${windowHeight}, top=${windowTop}, left=${windowLeft}`;
//
const scope = 'name email';
let oauth2Options = {
appId: config.clientId,
authorizationBaseUrl: 'https://appleid.apple.com/auth/authorize',
scope,
web: {
responseType: 'code',
redirectUrl: config.redirectUrl,
windowOptions,
additionalParameters: {
response_mode: 'form_post',
},
},
ios: {
siwaUseScope: true,
scope,
},
};
await OAuth2Client.authenticate(oauth2Options).then(async oauthResponse => {
await oauthResponse(oauthResponse);
});
}
Description
I understand that capacitor-oauth2 does not support Apple Auth on the web. This becomes a bit of a dealbreaker since users can signup via Apple on iOS, then would be unable to log in on the web.
For anyone who may be experiencing this issue, here is some code that may assist you:
Capacitor version:
Library version:
OAuth Provider:
Affected Platform(s):