Files
archived-next-auth/docs/versioned_docs/version-beta/oauth-providers/apple.md
Lluis Agusti cb56cd44ca refactor(docs): re-structure (#4498)
* docs: beta initial commit

* docs(oauth): finish initial tutorial

* docs(oauth-tutorial): finish guide

* docs(docusaurus): just log broken links

* docs: re-organising beta

* docs(beta): sort documents for sorting

* docs: more re-structure

* docs: more re-structure (2)

* fix: more WIP

* fix: more WIP

* chore: more updates

* chore: wip

* chore: wip

* fix lock file

* docs(getting-started): credentials

* chore: remove json-server file

* chore: cleanup

* remove mongodb from dev app

* chore: cleanup

* revert

* chore: cleanup

* chore: more cleanup changes

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-15 15:45:33 +01:00

3.9 KiB
Raw Blame History

id, title
id title
apple Apple

Documentation

https://developer.apple.com/sign-in-with-apple/get-started/

Configuration

https://developer.apple.com/account/resources/identifiers/list/serviceId

Options

The Apple Provider comes with a set of default options:

You can override any of the options to suit your own use case.

Generating a secret

Apple requires the client secret to be a JWT. To generate one, you can use the following script: https://bal.so/apple-gen-secret.

For more information, see the Apple docs

Then, you can paste the result into your .env.local file under APPLE_SECRET, so you can refer to it from your code:

import AppleProvider from "next-auth/providers/apple";
...
providers: [
  AppleProvider({
    clientId: process.env.APPLE_ID,
    clientSecret: process.env.APPLE_SECRET
  })
]
...

:::tip The TeamID is located on the top right after logging in. :::

:::tip The KeyID is located after you create the key. Look for it before you download the k8 file. :::

Testing on a development server

:::tip Apple requires all sites to run HTTPS (including local development instances). :::

:::tip Apple doesn't allow you to use localhost in domains or subdomains. :::

Host name resolution

Edit your host file and point your site to 127.0.0.1.

Linux/macOS

sudo echo '127.0.0.1 dev.example.com' >> /etc/hosts

Windows (run PowerShell as administrator)

Add-Content -Path C:\Windows\System32\drivers\etc\hosts -Value "127.0.0.1 dev.example.com" -Force

More info: How to edit my host file?

Create certificate

Create a directory certificates and add the certificate files localhost.key and localhost.crt, which you generate using OpenSSL:

Linux/macOS

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj "/CN=localhost" -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Windows

The OpenSSL executable is distributed with Git for Windows. Once installed you will find the openssl.exe file in C:\Program Files\Git\mingw64\bin, which you can add to the system PATH environment variable if its not already done.

Add environment variable OPENSSL_CONF=C:\Program Files\Git\mingw64\ssl\openssl.cnf

 req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj "/CN=localhost"

Deploy to server

You can create a server.js in the root of your project and run it with node server.js to test Sign in with Apple integration locally:

const { createServer } = require("https")
const { parse } = require("url")
const next = require("next")
const fs = require("fs")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

const httpsOptions = {
  key: fs.readFileSync("./certificates/localhost.key"),
  cert: fs.readFileSync("./certificates/localhost.crt"),
}

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true)
    handle(req, res, parsedUrl)
  }).listen(3000, (err) => {
    if (err) throw err
    console.log("> Ready on https://localhost:3000")
  })
})

Helpful guides