diff --git a/README.md b/README.md index 59139bb..1387009 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # CapacitorGoogleAuth + Capacitor plugin for Google Auth. ## Contributions + PRs are welcome and much appreciated that keeps this plugin up to date with Capacitor and official Google Auth platform library feature parity. Try to follow good code practices. You can even help keeping the included demo updated. @@ -10,11 +12,10 @@ PRs for features that are not aligned with the official Google Auth library are (We are beginner-friendly here) - - ## Install #### 1. Install package + ```bash npm i --save @codetrix-studio/capacitor-google-auth @@ -23,40 +24,48 @@ npm i --save @codetrix-studio/capacitor-google-auth@2.1.3 ``` #### 2. Update capacitor deps + ```sh npx cap update ``` + #### 3. Migrate from 2 to 3 version + if your migrate from Capacitor 2 to Capacitor 3 [see instruction for migrate plugin to new version](#migrate-from-2-to-3) ## Usage + for capacitor 2.x.x use [instruction](https://github.com/CodetrixStudio/CapacitorGoogleAuth/blob/79129ab37288f5f5d0bb9a568a95890e852cebc2/README.md) ### WEB + Add [`clientId`](https://developers.google.com/identity/sign-in/web/sign-in#specify_your_apps_client_id) meta tag to head. + ```html - + ``` Register plugin and manually initialize + ```ts import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; // use hook after platform dom ready -GoogleAuth.init() +GoogleAuth.init(); ``` - Use it + ```ts -GoogleAuth.signIn() +GoogleAuth.signIn(); ``` #### AngularFire2 init hook + ```ts -// app.component.ts +// app.component.ts constructor() { this.initializeApp(); } @@ -68,7 +77,8 @@ initializeApp() { } ``` -sign in function +sign in function + ```ts async googleSignIn() { let googleUser = await GoogleAuth.signIn(); @@ -78,36 +88,40 @@ async googleSignIn() { ``` #### Vue 3 + ```ts // App.vue -import { defineComponent, onMounted } from 'vue' -import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth' +import { defineComponent, onMounted } from 'vue'; +import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; export default defineComponent({ setup() { onMounted(() => { - GoogleAuth.init() - }) - + GoogleAuth.init(); + }); + const logIn = async () => { - const response = await GoogleAuth.signIn() - console.log(response) - } - + const response = await GoogleAuth.signIn(); + console.log(response); + }; + return { - logIn - } - } -}) + logIn, + }; + }, +}); ``` ### iOS + Make sure you have `GoogleService-Info.plist` with `CLIENT_ID` Add `REVERSED_CLIENT_ID` as url scheme to `Info.plist` ### Android + Inside your `strings.xml` + ```xml Your Web Client Key @@ -115,11 +129,13 @@ Inside your `strings.xml` ``` Import package inside your `MainActivity` + ```java import com.codetrixstudio.capacitor.GoogleAuth.GoogleAuth; ``` Register plugin inside your `MainActivity.onCreate` + ```java this.init(savedInstanceState, new ArrayList>() {{ add(GoogleAuth.class); @@ -127,23 +143,23 @@ this.init(savedInstanceState, new ArrayList>() {{ ``` ## Configure + Provide configuration in root `capacitor.config.json` + ```json { "plugins": { "GoogleAuth": { "scopes": ["profile", "email"], "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", - "forceCodeForRefreshToken" : true + "forceCodeForRefreshToken": true } } } - ``` Note : `forceCodeForRefreshToken` force user to select email address to regenerate AuthCode used to get a valid refreshtoken (work on iOS and Android) (This is used for offline access and serverside handling) - ## Migration guide #### Migrate from 2 to 3 @@ -151,6 +167,7 @@ Note : `forceCodeForRefreshToken` force user to select email address to regenera After [migrate to Capcitor 3](https://capacitorjs.com/docs/updating/3-0) updating you projects, see diff: ##### WEB + ```diff - import "@codetrix-studio/capacitor-google-auth"; - import { Plugins } from '@capacitor/core'; diff --git a/package-lock.json b/package-lock.json index 0dda198..e409507 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,21 @@ { "name": "@codetrix-studio/capacitor-google-auth", - "version": "3.0.1", + "version": "3.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@codetrix-studio/capacitor-google-auth", - "version": "3.0.1", + "version": "3.0.2", "license": "MIT", "devDependencies": { "@capacitor/android": "^3.0.1", "@capacitor/core": "^3.0.1", "@capacitor/ios": "^3.0.1", + "@ionic/prettier-config": "^2.0.0", "@types/gapi": "0.0.39", "@types/gapi.auth2": "0.0.54", + "prettier": "^2.3.2", "typescript": "^4.3.2" }, "peerDependencies": { @@ -47,6 +49,15 @@ "@capacitor/core": "~3.0.0" } }, + "node_modules/@ionic/prettier-config": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz", + "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==", + "dev": true, + "peerDependencies": { + "prettier": "^2.0.0" + } + }, "node_modules/@types/gapi": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.39.tgz", @@ -62,6 +73,18 @@ "@types/gapi": "*" } }, + "node_modules/prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/tslib": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", @@ -106,6 +129,13 @@ "dev": true, "requires": {} }, + "@ionic/prettier-config": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz", + "integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==", + "dev": true, + "requires": {} + }, "@types/gapi": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.39.tgz", @@ -121,6 +151,12 @@ "@types/gapi": "*" } }, + "prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true + }, "tslib": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", diff --git a/package.json b/package.json index 65f0a54..bcc60fc 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "@capacitor/core": "^3.0.1", "@capacitor/android": "^3.0.1", "@capacitor/ios": "^3.0.1", + "@ionic/prettier-config": "^2.0.0", "@types/gapi": "0.0.39", "@types/gapi.auth2": "0.0.54", + "prettier": "^2.3.2", "typescript": "^4.3.2" }, "peerDependencies": { @@ -56,5 +58,6 @@ }, "bugs": { "url": "https://github.com/CodetrixStudio/CapacitorGoogleAuth.git/issues" - } + }, + "prettier": "@ionic/prettier-config" } diff --git a/rollup.config.js b/rollup.config.js index 906e8a1..4c59bf9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -6,9 +6,7 @@ export default { file: 'dist/plugin.js', format: 'iife', name: 'capacitorPlugin', - sourcemap: true + sourcemap: true, }, - plugins: [ - nodeResolve() - ] -}; \ No newline at end of file + plugins: [nodeResolve()], +}; diff --git a/src/definitions.ts b/src/definitions.ts index 7ae62fb..379a618 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -1,4 +1,4 @@ -import { Authentication, User } from "./user"; +import { Authentication, User } from './user'; export interface GoogleAuthPlugin { signIn(): Promise; diff --git a/src/index.ts b/src/index.ts index cd3ad3a..1147b01 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,7 +2,7 @@ import { registerPlugin } from '@capacitor/core'; import type { GoogleAuthPlugin } from './definitions'; const GoogleAuth = registerPlugin('GoogleAuth', { - web: () => import('./web').then(m => new m.GoogleAuthWeb()), + web: () => import('./web').then((m) => new m.GoogleAuthWeb()), }); export * from './definitions'; diff --git a/src/user.ts b/src/user.ts index fedb184..b6d8ed9 100644 --- a/src/user.ts +++ b/src/user.ts @@ -1,17 +1,17 @@ export interface User { - id: string; - email: string; - - name: string; - familyName: string; - givenName: string; - imageUrl: string; + id: string; + email: string; - serverAuthCode: string; - authentication: Authentication; + name: string; + familyName: string; + givenName: string; + imageUrl: string; + + serverAuthCode: string; + authentication: Authentication; } export interface Authentication { - accessToken: string; - idToken: string; -} \ No newline at end of file + accessToken: string; + idToken: string; +} diff --git a/src/web.ts b/src/web.ts index b06f7c1..30371d4 100644 --- a/src/web.ts +++ b/src/web.ts @@ -6,7 +6,6 @@ import { User, Authentication } from './user'; import config from '../../../../../capacitor.config.json'; export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { - gapiLoaded: Promise; get webConfigured(): boolean { @@ -22,30 +21,29 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { } loadScript() { - const scriptId = 'gapi' - const scriptEl = document?.getElementById(scriptId) - + const scriptId = 'gapi'; + const scriptEl = document?.getElementById(scriptId); + if (scriptEl) { - return + return; } - var head = document.getElementsByTagName('head')[0] - var script = document.createElement('script') - + var head = document.getElementsByTagName('head')[0]; + var script = document.createElement('script'); + script.type = 'text/javascript'; script.defer = true; script.async = true; - script.id = scriptId + script.id = scriptId; script.onload = this.platformJsLoaded; script.src = 'https://apis.google.com/js/platform.js'; head.appendChild(script); } - init(){ - if (!this.webConfigured) - return; + init() { + if (!this.webConfigured) return; - this.gapiLoaded = new Promise(resolve => { + this.gapiLoaded = new Promise((resolve) => { // HACK: Relying on window object, can't get property in gapi.load callback (window as any).gapiResolve = resolve; this.loadScript(); @@ -57,7 +55,7 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { platformJsLoaded() { gapi.load('auth2', () => { const clientConfig: gapi.auth2.ClientConfig = { - client_id: (document.getElementsByName('google-signin-client_id')[0] as any).content + client_id: (document.getElementsByName('google-signin-client_id')[0] as any).content, }; if (config.plugins.GoogleAuth != null && config.plugins.GoogleAuth.scopes != null) { @@ -77,9 +75,7 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { try { needsOfflineAccess = config.plugins.GoogleAuth.serverClientId != null; - } catch { - - } + } catch {} if (needsOfflineAccess) { const offlineAccessResponse = await gapi.auth2.getAuthInstance().grantOfflineAccess(); @@ -105,11 +101,11 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { } async refresh(): Promise { - const authResponse = await gapi.auth2.getAuthInstance().currentUser.get().reloadAuthResponse() + const authResponse = await gapi.auth2.getAuthInstance().currentUser.get().reloadAuthResponse(); return { accessToken: authResponse.access_token, - idToken: authResponse.id_token - } + idToken: authResponse.id_token, + }; } async signOut(): Promise { @@ -118,8 +114,8 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { private async addUserChangeListener() { await this.gapiLoaded; - gapi.auth2.getAuthInstance().currentUser.listen(googleUser => { - this.notifyListeners("userChange", googleUser.isSignedIn() ? this.getUserFrom(googleUser) : null); + gapi.auth2.getAuthInstance().currentUser.listen((googleUser) => { + this.notifyListeners('userChange', googleUser.isSignedIn() ? this.getUserFrom(googleUser) : null); }); } @@ -137,8 +133,8 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin { const authResponse = googleUser.getAuthResponse(true); user.authentication = { accessToken: authResponse.access_token, - idToken: authResponse.id_token - } + idToken: authResponse.id_token, + }; return user; } diff --git a/tsconfig.json b/tsconfig.json index 5e84163..67fa7dd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,10 +3,7 @@ "allowSyntheticDefaultImports": true, "declaration": true, "experimentalDecorators": true, - "lib": [ - "dom", - "es2017" - ], + "lib": ["dom", "es2017"], "module": "ESNext", "moduleResolution": "node", "noImplicitAny": true, @@ -16,7 +13,5 @@ "sourceMap": true, "target": "es2017" }, - "files": [ - "src/index.ts" - ] + "files": ["src/index.ts"] }