Passport strategy for the new Sign in with Apple feature, now with fetching profile information ✅!
Example repo: https://github.com/ananay/passport-apple-example
Install the package via npm / yarn:
npm install --save passport-apple
You will also need to install & configure body-parser if using Express:
npm install --save body-parser
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));Next, you need to configure your Apple Developer Account with Sign in with Apple.
Steps for that are given here: https://github.com/ananay/apple-auth/blob/master/SETUP.md
Initialize the strategy as follows:
import AppleStrategy from 'passport-apple';
import jsonwebtoken from 'jsonwebtoken';
import assert from 'node:assert';
passport.use(new AppleStrategy({
clientID: '',
teamID: '',
callbackURL: 'https://redirectmeto.com/http://localhost:8080/auth/apple/callback', // redirectmeto.com is useful for local testing
keyID: '',
privateKeyString: '',
passReqToCallback: true,
}, async (req, accessToken, refreshToken, idToken, profile, cb) => {
try {
const decodedToken = jsonwebtoken.decode(idToken, { json: true });
assert(decodedToken != null);
// ONLY on the first auth each user makes, `req.query.user` gets set - after that it will no longer be sent in subsequent logins.
// In that case `req.query.user` is a JSON encoded string, which has the properties `firstName` and `lastName`.
// Note: If you need to test first auth again, you can remove the app from "Sign in with Apple" here: https://appleid.apple.com/account/manage
const firstTimeUser = typeof req.query['user'] === 'string' ? JSON.parse(req.query['user']) : undefined;
// JWT token should contain email if authenticated
const { sub, email, email_verified } = decodedToken;
// TODO implement your own function check for whether `sub` exists in your database (or create a new user if it does not)
const dbUser = await upsertUser({ sub, email, email_verified, firstTimeUser });
return cb(null, { id: dbUser.id });
} catch (err) {
return cb(err);
}
}));Add the login route:
// This is the initial request that gets the whole process started (and redirects to Apple's server)
app.get('/apple', passport.authenticate('apple'));Finally, add the callback route and handle the response:
// Apple is different in that they POST back to the callback.
// Because of SameSite policies in browsers don't allow cookies to be included in external POST requests
// we wouldn't be able to access our express session here, and thereby not authenticate the session.
// Therefore we redirect the POST request to GET (with query parameters).
// https://github.com/ananay/passport-apple/issues/51#issuecomment-2312651378
app.post('/apple/callback', express.urlencoded({ extended: true }), (req, res) => {
const { body } = req;
const sp = new URLSearchParams();
Object.entries(body).forEach(([key, value]) => sp.set(key, String(value)));
res.redirect(`/v1/auth/apple/callback?${sp.toString()}`);
});
const failureRedirect = '/failure';
// Here we handle the GET request after the redirect from the POST callback above
app.get('/apple/callback', passport.authenticate('apple', {
successReturnToOrRedirect: '/success',
failureRedirect,
}), (err, _req, res, _next) => {
// for some reason, `failureRedirect` doesn't receive certain errors, so we need an error handler here.
if (err instanceof Error && (err.name === 'AuthorizationError' || err.name === 'TokenError')) {
// Common errors:
// - AuthorizationError { code: 'user_cancelled_authorize' } - When the user cancels the operation
// - TokenError { code: 'invalid_grant' } - The code has already been used
const sp = new URLSearchParams({ error: err.name });
if ('code' in err && typeof err.code === 'string') sp.set('code', err.code);
res.redirect(`${failureRedirect}${sp.toString()}`);
return;
}
// unknown err object
res.redirect(failureRedirect);
});Even though Apple requires HTTPS on your redirect URL, you can work around this by using a service like redirectmeto.com. For example if your local dev server is running on port 8080, add this redirect URL in your Apple developer console:
https://redirectmeto.com/http://localhost:8080/auth/apple/callback
Note: Remember to remove it again after you're done testing, as it could be a security issue if running with it in production.
Check out my other sign in with Apple Repos here.
apple-auth:
https://github.com/ananay/apple-auth
https://npmjs.com/package/apple-auth
apple-auth is a standalone library for Sign in with Apple. It does not require you to use Passport.js where as passport-apple is used with Passport.js.
This repository is NOT developed, endorsed by Apple Inc. or even related at all to Apple Inc. This library was implemented solely by the community's hardwork, and based on information that is public on Apple Developer's website. The library merely acts as a helper tool for anyone trying to implement Apple's Sign in with Apple.
How is this module different from nicokaiser/passport-apple?
@nicokaiser/passport-apple is a fork of passport-apple that was made when passport-apple couldn't support fetching profile information. passport-apple now supports fetching profile information as well by using a simpler workaround (shoutout to @MotazAbuElnasr for this!) instead of rewriting all of passport-oauth2.
Feel free to open issues and pull requests. If you would like to be one of the core creators of this library, please reach out to me at [email protected] or message me on twitter @ananayarora!