vue-apple-login

vue-apple-login

A simple Vue plugin to include an Apple sign-in button into your web app.

Install

For Vue.js 3:

npm install vue-apple-login@2.x

For Vue.js 2:

npm install vue-apple-login@1.x

Usage

index.html

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

main.js

import VueAppleLogin from 'vue-apple-login';

const createdApp = createApp(App);

createdApp.use(VueAppleLogin, {
  clientId: 'com.example.signin',
  scope: 'name email',
  redirectURI: 'https://example.com',
  state: time.toString(),
  usePopup: true,
});

createdApp.mount('#app');

Now you have a vue-apple-login global component, ready for use.

Example

Simple

<vue-apple-login></vue-apple-login>

Advanced

<vue-apple-login
  mode="center-align"
  type="sign in"
  color="black"
  :border="true"
  :radius="15"
  width="100%"
  height="100%"
  logoSize="medium"
  :logoPosition="0"
  :labelPosition="0"
  className="vue-apple-login"
  :onSuccess="callSuccess"
  :onFailure="callFail"
></vue-apple-login>

For more information on styling visit: Apple documentation

:onSuccess can be used as callback function to retrieve Apple user data and code to run a validation check with the server. :onFailure will be called when authentication failed. Make sure usePopup is set to true for callback to work.

On a succesfull login you will get the following data

{
  "authorization": {
    "code": "[code to verify user with apple server]",
    "id_token": "[json base64 encode user data]",
    "state": "[random unique number]"
  },
  "userData": {
      "aud": "com.example.signin", 
      "auth_time": 1615125205, 
      "c_hash": "",
      "exp": 1615211605,
      "iat": 1615125205,
      "iss": "https://appleid.apple.com",
      "nonce_supported": true,
      "sub": "[Unique user ID]"
  }
}

Full example

AppleLogin.vue

<template>
  <div>
    <vue-apple-login v-if="!signedIn"
        color="black"
        :border="true"
        type="sign in"
        width="200"
        height="36"
        :onSuccess="onSuccess"
        :onFailure="onFailure"
    ></vue-apple-login>
    <button v-if="signedIn" v-on:click="onSuccessLogout()" class="login-button">
      Sign out with Apple
    </button>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                signedIn: false,
            }
        },
        methods: {
            onSuccess(data) {
                console.log(data);
                this.signedIn = true;
            },
            onSuccessLogout(){
                this.signedIn = false;
            },
            onFailure(error) {
                console.log(error);
            },
        }
    }
</script>

<style scoped>
    button.login-button {
      background-color: white;
      height: 32px;
      width: 200px;
      border-radius: 5px;
      border: 0px;
      font-size: 12px;
      font-weight: 500;
      margin: 5px;
    }
    button.login-button svg{
      height: 15px;
      margin-top: -3px;
      margin-right: 3px;
    }
</style>