Response mode query confusion

[daxaxelrod]

I recognize that mode query returns the auth code which is just an acknowledgement that the interaction was valid. Since my app is a SPA, my redirect url cant handle formdata since my backend is under a different subdomain.

After reading apple documentation 2

It seems like a redirect with user info in the query string isnt possible.

Any thoughts?

[patelmayankce]

@daxaxelrod , You can follow this article https://developer.okta.com/blog/2019/06/04/what-the-heck-is-sign-in-with-apple#create-a-private-key-for-client-authentication

Apple is not giving any details in return URL they only give us code and that code we have to decode in backend.

[patelmayankce]

Above article gives PHP example if you are using Node js you can follow below code which i am also using in my projects.

Backend Code

const {
  payload: { code, redirectUrl, scope },
} = request;

const privateKey = config.constants.APPLE_SSO.PRIVATE_KEY;
const token = JWT.sign({}, privateKey, {
  algorithm: 'ES256',
  audience: 'https://appleid.apple.com',
  subject: config.constants.APPLE_SSO.CLIENT_ID,
  expiresIn: '1h',
  keyid: config.constants.APPLE_SSO.KEY_ID,
  issuer: config.constants.APPLE_SSO.TEAM_ID,
});

const req = Wreck.request(
  'POST',
  `https://appleid.apple.com/auth/token`,
  {
    payload: querystring.stringify({
      grant_type: 'authorization_code',
      code,
      redirect_uri:
        redirectUrl || config.constants.APPLE_SSO.REDIRECT_URL,
      client_id: config.constants.APPLE_SSO.CLIENT_ID,
      client_secret: token,
      scope: scope || config.constants.APPLE_SSO.scope,
    }),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  },
);
const res = await req.catch(async (err) => console.log(err));
const body = await Wreck.read(res);

Front end code

<AppleLogin
  {...{
    responseType: 'code',
    responseMode: 'form_post',
    clientId: clientId,
    redirectURI: redirectURI,
    scope: 'name',
    state: redirectUri,
  }}
  render={(renderProps) => (
    <button type="button" onClick={(e) => onAppleSSOClick(e, renderProps.onClick)}>
      <img src={iconApple} height={20} alt="Apple" />
      Apple
    </button>
  )}
/>

[daxaxelrod]

Thanks! will test this out

[Qnedy]

Hi @patelmayankce , just advantage of this conversation. I used another way to get the response from 'https://appleid.apple.com/auth/token'. So I get the access_token and other information. I read that the property called 'sub' in that response (seems like: "sub": "0034405.0a361b.........dfgfg1df4848f", is the user ID at Apple, so do you know if I need to do something else to get the real information? like real username and user email, and not just JWT tokens that refer to it?

tks for lib, helped me a lot.