Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »


1.0.10 • Public • Published


A Apple Log-in Component for React

NPM JavaScript Style Guide

See react-apple-login for live demo.


npm install --save react-apple-login


import * as React from 'react'
import AppleLogin from 'react-apple-login'
class Example extends React.Component {
  render () {
    return (
      <AppleLogin clientId="" redirectURI="" />

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, 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. 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.
nonce string - A String value used to associate a client session with an ID token. This value is also used to mitigate replay attacks.
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.

Production Bundle

npm run prepare


MIT © Mayank Patel


npm i react-apple-login

DownloadsWeekly Downloads






Unpacked Size

24.9 kB

Total Files


Last publish


  • avatar