CloudFlare Access & Apple Sign

I tried to connect CloudFlare Access to Apple Sign, because as Apple user I would like to use Apple-IDs for Single-Sign-On for all my web application and SSH boxes.
So I configured in the generic OIDC Apple Sign parameters and I discovered that Apple does not support correctly OIDC from the frontend.
So I build a proxy bridge with Workers to proxy the “state” parameter to Apple Sign.
However, when Apple callback makes a POST request to CloudFlare Access, I get an error 400 back. I discovered, that CloudFlare prefers to be callback called by a GET request where the “state” and “code” parameter is included in the URL. Then it seem to work, but CloudFlare gets an internal error, because it probably tries to fetch a token from my Workers proxy bridge.
Finally, I gave up, as it would be better if CloudFlare would include directly the Apple Sign Button inside CloudFlare Access.
@CloudFlare: Could you please include Apple-Sign?

2 Likes

It works nearby: I get a response of Apple Sign In and I transform their POST request into a GET request:

Unfortunately, CloudFlare Access seems to have a problem to fetch the Apple token, but I can do it manually with Postman. Is there anyway to debug at CloudFlare Access side, why it can’t fetch the token at Apple?

Here is a nearby proof of concept video:

Here is the source code of my worker:

async function handleRequest(request) {
  const { searchParams } = new URL(request.url)
  let redirect_uri = searchParams.get('redirect_uri')
  let state = searchParams.get('state')
  console.log(redirect_uri)
  console.log(state)

  var html = `<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Aionda GmbH">
    <meta name="appleid-signin-client-id" content="com.aionda.access">
    <meta name="appleid-signin-scope" content="name email">
    <meta name="appleid-signin-redirect-uri" content="https://id.aionda.com/access/callback">
    <meta name="appleid-signin-state" content="` + state +`">
    <meta name="appleid-signin-use-popup" content="false"> <!-- or false defaults to false -->

    <title>Aionda Single Sign On</title>

    <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

    <!-- Custom styles for this template -->
</head>
<body>

<div class="container">
    <main>
        <div class="py-5">
            <h2>Anmeldung über Apple-ID</h2>
            <div class="col-md-12">
                <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
            </div>
        </div>
    </main>
</div>

</body>
</html>`

  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

async function handleRequestCallback(request) {
 const formData = await request.formData()
    const body = {}
    for (const entry of formData.entries()) {
      body[entry[0]] = entry[1]
    }

    var html = `<!doctype html>
    <html lang="en" xmlns="http://www.w3.org/1999/html">
    <body>
        Redirect to CloudFlare
        <script>
            window.location = ` + '"https://aionda.cloudflareaccess.com/cdn-cgi/access/callback?state=' + body['state'] + "&code=" + body['code'] + '";' + `
        </script>
    </body>
    </html>`;
    return new Response(html, {
        headers: {
            "content-type": "text/html",
        }
  })
}

addEventListener("fetch", event => {
    if (event.request.method === "POST") {
        return event.respondWith(handleRequestCallback(event.request))
    }

  return event.respondWith(handleRequest(event.request))
})

Still working on Apple Sign In and CloudFlare Access, oops:


Ray-ID: 660f0e4dff81dfd3

Hi @ferraro,

You may want to open a Product Request for this here:

That allows users to vote on it and may bring it to the attention of the product teams better.

1 Like