Socket
Socket
Sign inDemoInstall

react-apple-login

Package Overview
Dependencies
8
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-apple-login

A Apple Log-in Component for React


Version published
Maintainers
1
Weekly downloads
15,651
decreased by-6.4%

Weekly downloads

Readme

Source

react-apple-login

An Apple Log-in Component for React

NPM JavaScript Style Guide

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

paramsvaluedefault valuedescription
clientIdstringREQUIREDThe developer’s client identifier, as provided by WWDR.
scopestring-The amount of user information requested from Apple. Valid values are name and email. You can request one, both(separated by space), or none.
redirectURIstringREQUIREDThe URI to which the authorization redirects.
responseTypestringcodeThe 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.
responseModestringqueryThe type of response mode expected. Valid values are query, fragment, and form_post. If you requested any scopes, the value must be form_post.
statestring-The current state of the request.
autoLoadbooleanfalse-
noncestring-A String value used to associate a client session with an ID token. This value is also used to mitigate replay attacks.
usePopupbooleanfalseA Boolean that enables showing the flow in a popup.
designProp.heightnumber30The height of the button image. The minimum and maximum values are 30 and 64, respectively
designProp.widthnumber140The width of the button image. The minimum and maximum values are 130 and 375, respectively.
designProp.colorstringblackThe background color for the button image. The possible values are white and black (the default).
designProp.borderbooleanfalseA Boolean value that determines whether the button image has a border.
designProp.typestringsign-inThe type of button image returned. The possible values are sign-in (the default) and continue.
designProp.border_radiusnumber15The corner radius for the button image. The minimum and maximum values are 0 and 50, respectively.
designProp.scalenumber1The scale of the button image. The minimum and maximum values are 1 and 6, respectively.
designProp.localestringen_USThe language used for text on the button.
renderfunction-Render prop to use a custom element, use renderProps.onClick
callbackfunction-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

Keywords

FAQs

Last updated on 24 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc