11# CapacitorGoogleAuth
2+
23Capacitor plugin for Google Auth.
34
45## Contributions
6+
57PRs are welcome and much appreciated that keeps this plugin up to date with Capacitor and official Google Auth platform library feature parity.
68
79Try 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
1012
1113(We are beginner-friendly here)
1214
13-
14-
1515## Install
1616
1717#### 1. Install package
18+
1819``` bash
1920npm i --save @codetrix-studio/capacitor-google-auth
2021
2324```
2425
2526#### 2. Update capacitor deps
27+
2628``` sh
2729npx cap update
2830```
31+
2932#### 3. Migrate from 2 to 3 version
33+
3034if your migrate from Capacitor 2 to Capacitor 3 [ see instruction for migrate plugin to new version] ( #migrate-from-2-to-3 )
3135
3236## Usage
37+
3338for capacitor 2.x.x use [ instruction] ( https://github.com/CodetrixStudio/CapacitorGoogleAuth/blob/79129ab37288f5f5d0bb9a568a95890e852cebc2/README.md )
3439
3540### WEB
41+
3642Add [ ` clientId ` ] ( https://developers.google.com/identity/sign-in/web/sign-in#specify_your_apps_client_id ) meta tag to head.
43+
3744``` html
38- <meta name =" google-signin-client_id" content =" {your client id here}" >
45+ <meta name =" google-signin-client_id" content =" {your client id here}" / >
3946```
4047
4148Register plugin and manually initialize
49+
4250``` ts
4351import { GoogleAuth } from ' @codetrix-studio/capacitor-google-auth' ;
4452
4553// use hook after platform dom ready
46- GoogleAuth .init ()
54+ GoogleAuth .init ();
4755```
4856
49-
5057Use it
58+
5159``` ts
52- GoogleAuth .signIn ()
60+ GoogleAuth .signIn ();
5361```
5462
5563#### AngularFire2
5664
5765init hook
66+
5867``` ts
59- // app.component.ts
68+ // app.component.ts
6069constructor () {
6170 this .initializeApp ();
6271}
@@ -68,7 +77,8 @@ initializeApp() {
6877}
6978```
7079
71- sign in function
80+ sign in function
81+
7282``` ts
7383async googleSignIn () {
7484 let googleUser = await GoogleAuth .signIn ();
@@ -78,79 +88,86 @@ async googleSignIn() {
7888```
7989
8090#### Vue 3
91+
8192``` ts
8293// App.vue
83- import { defineComponent , onMounted } from ' vue'
84- import { GoogleAuth } from ' @codetrix-studio/capacitor-google-auth'
94+ import { defineComponent , onMounted } from ' vue' ;
95+ import { GoogleAuth } from ' @codetrix-studio/capacitor-google-auth' ;
8596
8697export default defineComponent ({
8798 setup() {
8899 onMounted (() => {
89- GoogleAuth .init ()
90- })
91-
100+ GoogleAuth .init ();
101+ });
102+
92103 const logIn = async () => {
93- const response = await GoogleAuth .signIn ()
94- console .log (response )
95- }
96-
104+ const response = await GoogleAuth .signIn ();
105+ console .log (response );
106+ };
107+
97108 return {
98- logIn
99- }
100- }
101- })
109+ logIn ,
110+ };
111+ },
112+ });
102113```
103114
104115### iOS
116+
105117Make sure you have ` GoogleService-Info.plist ` with ` CLIENT_ID `
106118
107119Add ` REVERSED_CLIENT_ID ` as url scheme to ` Info.plist `
108120
109121### Android
122+
110123Inside your ` strings.xml `
124+
111125``` xml
112126<resources >
113127 <string name =" server_client_id" >Your Web Client Key</string >
114128</resources >
115129```
116130
117131Import package inside your ` MainActivity `
132+
118133``` java
119134import com.codetrixstudio.capacitor.GoogleAuth.GoogleAuth ;
120135```
121136
122137Register plugin inside your ` MainActivity.onCreate `
138+
123139``` java
124140this . init(savedInstanceState, new ArrayList<Class<? extends Plugin > > () {{
125141 add(GoogleAuth . class);
126142}});
127143```
128144
129145## Configure
146+
130147Provide configuration in root ` capacitor.config.json `
148+
131149``` json
132150{
133151 "plugins" : {
134152 "GoogleAuth" : {
135153 "scopes" : [" profile" , " email" ],
136154 "serverClientId" : " xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com" ,
137- "forceCodeForRefreshToken" : true
155+ "forceCodeForRefreshToken" : true
138156 }
139157 }
140158}
141-
142159```
143160
144161Note : ` 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)
145162
146-
147163## Migration guide
148164
149165#### Migrate from 2 to 3
150166
151167After [ migrate to Capcitor 3] ( https://capacitorjs.com/docs/updating/3-0 ) updating you projects, see diff:
152168
153169##### WEB
170+
154171``` diff
155172- import "@codetrix-studio/capacitor-google-auth";
156173- import { Plugins } from '@capacitor/core';
0 commit comments