react-apple-login

An Apple Log-in Component for React

See react-apple-login for live demo.

Install

npm install --save react-apple-login

Usage

import * as React from 'react'

import AppleLogin from 'react-apple-login'

class Example extends React.Component {
  render () {
    return (
      <AppleLogin clientId="com.react.apple.login" redirectURI="https://redirectUrl.com" />
    )
  }
}

Login Props

params	value	default value	description
clientId	string	REQUIRED	The developer’s client identifier, as provided by WWDR.
scope	string	-	The amount of user information requested from Apple. Valid values are name and email. You can request one, both(separated by space), or none.
redirectURI	string	REQUIRED	The URI to which the authorization redirects.
responseType	string	code	The type of response requested. Valid values are code and id_token. You can request one or both(separated by space). When requesting an id_token response type, response_mode must be either fragment or form_post.
responseMode	string	query	The type of response mode expected. Valid values are query, fragment, and form_post. If you requested any scopes, the value must be form_post.
state	string	-	The current state of the request.
autoLoad	boolean	false	-
nonce	string	-	A String value used to associate a client session with an ID token. This value is also used to mitigate replay attacks.
usePopup	boolean	false	A Boolean that enables showing the flow in a popup.
designProp.height	number	30	The height of the button image. The minimum and maximum values are 30 and 64, respectively
designProp.width	number	140	The width of the button image. The minimum and maximum values are 130 and 375, respectively.
designProp.color	string	black	The background color for the button image. The possible values are white and black (the default).
designProp.border	boolean	false	A Boolean value that determines whether the button image has a border.
designProp.type	string	sign-in	The type of button image returned. The possible values are sign-in (the default) and continue.
designProp.border_radius	number	15	The corner radius for the button image. The minimum and maximum values are 0 and 50, respectively.
designProp.scale	number	1	The scale of the button image. The minimum and maximum values are 1 and 6, respectively.
designProp.locale	string	en_US	The language used for text on the button.
render	function	-	Render prop to use a custom element, use renderProps.onClick
callback	function	-	callback only work with Response Mode query.

Apple response

Upon authorization success, the server returns the following data object:

{
     "authorization": {
       "state": "[STATE]",
       "code": "[CODE]",
       "id_token": "[ID_TOKEN]"
     },
     "user": {
       "email": "[EMAIL]",
       "name": {
         "firstName": "[FIRST_NAME]",
         "lastName": "[LAST_NAME]"
       }
     }
}

Note

• The user object will only be presented the first time the user authorizes the application.
• With usePopup: true, designProp won't work except designProp.locale.

Upon failure, the server returns the following data object:

{
    "error": "[ERROR_CODE]"
}

Production Bundle

npm run prepare

License

MIT © Mayank Patel