Add workflow

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.github/workflows/test-build.yml

@@ -0,0 +1,28 @@
+name: Test and Build Plugin
+
+on:
+  push:
+    branches: [master, develop]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+
+      - name: Install deps
+        run: yarn install
+
+      # - name: Run tests
+      #   run: yarn test
+
+      - name: Run build
+        run: yarn build

README.md

@@ -1,7 +1,9 @@
 # Capacitor Sign in With Apple
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Capacitor plugin to support [Sign in With Apple](https://developer.apple.com/sign-in-with-apple/get-started/)
@@ -16,39 +18,88 @@ Capacitor plugin to support [Sign in With Apple](https://developer.apple.com/sig
 
 ## Maintainers
 
-| Maintainer | GitHub | Social | Sponsoring Company |
-| -----------| -------| -------| -------------------|
-| Max Lynch | [mlynch](https://github.com/mlynch) | [@maxlynch](https://twitter.com/maxlynch) | Ionic |
+| Maintainer | GitHub                              | Social                                    | Sponsoring Company |
+| ---------- | ----------------------------------- | ----------------------------------------- | ------------------ |
+| Max Lynch  | [mlynch](https://github.com/mlynch) | [@maxlynch](https://twitter.com/maxlynch) | Ionic              |
 
 Maintenance Status: Partially Maintained (help wanted)
 
 ## Installation
 
-- `npm i @capacitor-community/apple-sign-in`
+To use npm
+
+```bash
+npm install @capacitor-community/apple-sign-in
+```
+
+To use yarn
+
+```bash
+yarn add @capacitor-community/apple-sign-in
+```
+
+Sync native files
+
+```bash
+npx cap sync
+```
 
 ## Usage (iOS)
 
 ```ts
-import { Plugins } from '@capacitor/core'
+import { Plugins } from "@capacitor/core";
 
-const { SignInWithApple } = Plugins
+const { SignInWithApple } = Plugins;
 
 try {
-  const response = await SignInWithApple.Authorize()
+  const response = await SignInWithApple.Authorize();
 } catch (e) {
+  console.error(e);
 }
 ```
 
-## Instructions (Android/Web)
-
-The plugin currently works for iOS only. It's made only to pass Apple's new terms. Add the Apple button only after you've checked that the user is on iOS device. Web support is planned for Apple's JS support ([help wanted!](https://github.com/capacitor-community/apple-sign-in/issues/1)).
+## Instructions (Web)
 
 ```ts
-const { Device } = Plugins
+const { Device } = Plugins;
+
+let device = await Device.getInfo();
+
+if (device.platform === "web") {
+  // Configure and initialize the plugin with correct values
+  SignInWithApple.Init({
+    clientId: "[CLIENT_ID]",
+    scope: "[SCOPES]", // scope=name email
+    redirectURI: "[REDIRECT_URI]",
+    state: "[STATE]",
+    usePopup: true, //or false defaults to false
+  });
+
+  // Trigger Sign in manually with an action, e.g. custom button
+  SignInWithApple.SignIn();
+
+  // or
+
+  // Use default apple button style by adding div
+  <div
+    id="appleid-signin"
+    data-color="black"
+    data-border="true"
+    data-type="sign in"
+  ></div>;
+}
+```
 
-let device = await Device.getInfo()
+Authorization callback listeners can be configured by adding **AppleIDSignInOnSuccess** and **AppleIDSignInOnFailure**
 
-if (device.platform === 'ios') {
-  // Show the button with SignInWithApple.Authorize()
-}
+```ts
+//Listen for authorization success
+document.addEventListener("AppleIDSignInOnSuccess", (data) => {
+  console.log(data);
+});
+
+//Listen for authorization failures
+document.addEventListener("AppleIDSignInOnFailure", (error) => {
+  console.error(error);
+});
 ```

src/definitions.ts

@@ -5,5 +5,17 @@ declare module "@capacitor/core" {
 }
 
 export interface SignInWithApplePlugin {
-  Authorize(): Promise<{response: any}>;
+  Init(options: InitOptions): Promise<void>;
+
+  Authorize(): Promise<{ response: any }>;
+
+  SignIn(): Promise<void>;
+}
+
+export interface InitOptions {
+  clientId: string;
+  scope: string;
+  redirectURI: string;
+  state: string;
+  usePopup: boolean;
 }

src/web.ts

@@ -1,22 +1,61 @@
-import { WebPlugin } from '@capacitor/core';
-import { SignInWithApplePlugin } from './definitions';
+import { WebPlugin } from "@capacitor/core";
 
-export class SignInWithAppleWeb extends WebPlugin implements SignInWithApplePlugin {
+import { SignInWithApplePlugin, InitOptions } from "./definitions";
+
+declare var window: any;
+
+export class SignInWithAppleWeb extends WebPlugin
+  implements SignInWithApplePlugin {
   constructor() {
     super({
-      name: 'SignInWithApple',
-      platforms: ['web']
+      name: "SignInWithApple",
+      platforms: ["web"],
     });
   }
 
-  async Authorize(): Promise<{response: any}> {
+  async SignIn(): Promise<void> {
+    if (window && window.AppleID) {
+      return await window.AppleID.auth.signIn();
+    }
+
     return;
   }
+
+  async Init(options: InitOptions): Promise<void> {
+    this.loadAppleScript(() => {
+      if (window && window.AppleID) {
+        const { clientId, scope, redirectURI, state, usePopup } = options;
+
+        window.AppleID.auth.init({
+          clientId: clientId,
+          scope: scope,
+          redirectURI: redirectURI,
+          state: state,
+          usePopup: usePopup !== undefined ? usePopup : false,
+        });
+      }
+    });
+  }
+
+  async Authorize(): Promise<{ response: any }> {
+    return await window.AppleID.auth.signIn();
+  }
+
+  private loadAppleScript(callback: any) {
+    const file = document.createElement("script");
+    file.setAttribute("type", "text/javascript");
+    file.setAttribute(
+      "src",
+      "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
+    );
+    file.addEventListener("load", callback);
+    document.getElementsByTagName("head")[0].appendChild(file);
+  }
 }
 
 const SignInWithApple = new SignInWithAppleWeb();
 
 export { SignInWithApple };
 
-import { registerWebPlugin } from '@capacitor/core';
+import { registerWebPlugin } from "@capacitor/core";
 registerWebPlugin(SignInWithApple);