Sign-in with Apple is the authorization service provided by Apple which allows the user of your website to log in using their Apple ID and password. In this guide, I'll show you how to integrate it into your website.
Integrating Apple ID sign-in is not a straightforward process and can be challenging if you are doing this for the first time. To test our integration locally, we need to first set up a few tools. I couldn't find any articles discussing this stage, so I'm writing one for you.
To implement this, we won’t be working directly with the APIs provided by Apple Sign In with JS but to make our lives easier, we will be using the npm package that uses these APIs under the hood. So, let us begin.
Before diving into the implementation, ensure you are enrolled in the Apple Developer Program and have an Apple Developer account. Just like any other Apple service, this program is also a paid program.
As per docs,
ngrok is a globally distributed reverse proxy that secures, protects and accelerates your applications and network services, no matter where you run them. You can think of ngrok as the front door to your applications.
That's a lot to take in. The basic idea behind ngrok is that it helps us expose our local environment to the internet. It generates a secure URL we can share without having to deploy it anywhere.
You may wonder, why we need to expose our local environment to test the integration locally. It turns out that, Apple Sign-In don’t support HTTP domains. While generating the credentials required for the sign-in process we need to provide a HTTPS domain, which is why we're using ngrok.
ngrok has wonderful documentation to help you set up the ngrok CLI agent. Follow the instructions provide in this Getting Started guide
Ensure that you create a static domain on your dashboard, by default ngrok provides random domain names every time you start the application. The final command to get your local application up and running may look like this