🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

vue-apple-login

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-apple-login

A vue plugin to include a Apple sign-in button into your web app with popup and callbacks.

2.0.1
latest
Source
npm
Version published
Weekly downloads
810
-12.72%
Maintainers
1
Weekly downloads
 
Created
Source

vue-apple-login

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

normal apple button black tiny apple button black normal apple button white

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>

Keywords

Vue

FAQs

Package last updated on 09 Jan 2023

Did you know?

Socket

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