@abacritt/angularx-social-login - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

package.json

 {
   "name": "@abacritt/angularx-social-login",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Social login and authentication module for Angular 14. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -5,3 +5,3 @@ # Angular Social Login
 
-Social login and authentication module for Angular 13 & 14. Supports authentication with **Google**, **Facebook**, **Amazon**, **Microsoft**, and **VK** out of the box. Can be extended to other 
+Social login and authentication module for Angular 15. Supports authentication with **Google**, **Facebook**, **Amazon**, **Microsoft**, and **VK** out of the box. Can be extended to other
 providers also.
@@ -11,7 +11,7 @@
 
-### Comatibility Matrix
+### Compatibility Matrix
 
 | Library Version                       | Angular Version |
 | ------------------------------------- |-----------------|
-| @abacritt/angularx-social-login:1     | 13, 14          |
+| @abacritt/angularx-social-login:1     | 13, 14, 15      |
 | angularx-social-login:4               | 12, 13          |
@@ -34,7 +34,7 @@ | angularx-social-login:3               | 9, 10, 11       |
 ```javascript
-import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
+import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
 import {
   GoogleLoginProvider,
   FacebookLoginProvider
-} from 'angularx-social-login';
+} from '@abacritt/angularx-social-login';
 
@@ -81,4 +81,4 @@ @NgModule({
 
-import { SocialAuthService } from "angularx-social-login";
-import { FacebookLoginProvider, GoogleLoginProvider } from "angularx-social-login";
+import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { FacebookLoginProvider } from "@abacritt/angularx-social-login";
 
@@ -90,10 +90,6 @@ @Component({
 })
-export class DemoComponent implements OnInit {
+export class DemoComponent {
 
   constructor(private authService: SocialAuthService) { }
 
-  signInWithGoogle(): void {
-    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
-  }
-
   signInWithFB(): void {
@@ -110,2 +106,35 @@ this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
 
+### Sign in with google
+
+`GoogleLoginProvider` has no `signIn()` method as other providers, the login flow is triggered by a button that the **gis client** is generating.
+Calling `SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID)` will have no effect.
+
+Instead make sure you [subscribed to the authentication state](#subscribe-to-the-authentication-state) and add the following `GoogleSigninButtonDirective` to your component template to wrap the 'Sign In With Google' button:
+
+ALSO
+
+Check out the [Google button generator](https://developers.google.com/identity/gsi/web/tools/configurator).
+[Link to Button attributes](https://developers.google.com/identity/gsi/web/reference/html-reference#element_with_class_g_id_signin)
+
+
+```html
+<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>
+```
+Options:
+|  Name          | Type      | Value                                                     | Default       |
+|----------------|-----------|-----------------------------------------------------------|---------------|
+| type           | string    | 'icon' or 'standard'                                      | 'icon'        |
+| size           | string    |  'small', 'medium' or 'large'                             | 'medium'      |
+| shape          | string    |  'square','circle','pill' or 'rectangular'                | 'rectangular' |
+| text           | string    |  'signin_with','signup_with'or 'continue_with'            | 'signin_with' |
+| width          | string    |  '200 - 400 '                                             |               |
+| theme          | string    |  'outline','filled_blue' or 'filled_black'                | 'outline'     |
+| logo_alignment | string    |  'left' or 'center'                                       | 'left'        |
+
+
+
+
+
+This will only work if the `GoogleLoginProvider` is registered in [SocialAuthServiceConfig](#import-the-module).
+
 ### Refresh google Auth Token
@@ -117,4 +146,4 @@
 
-import { SocialAuthService } from "angularx-social-login";
-import { GoogleLoginProvider } from "angularx-social-login";
+import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { GoogleLoginProvider } from "@abacritt/angularx-social-login";
 
@@ -137,2 +166,67 @@ @Component({
 
+### Request google Access Token
+
+Once a user is logged in an access token can be requested for the scopes we specified in `GoogleInitOptions.scopes`, you can then reuse this access token to make calls to google apis
+
+```typescript
+
+import { HttpClient } from '@angular/common/http';
+import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { GoogleLoginProvider } from "@abacritt/angularx-social-login";
+
+@Component({
+  selector: 'app-demo',
+  templateUrl: './demo.component.html',
+  styleUrls: ['./demo.component.css']
+})
+export class DemoComponent implements OnInit {
+
+  private accessToken = '';
+
+  constructor(private authService: SocialAuthService, private httpClient: HttpClient) { }
+
+  getAccessToken(): void {
+    this.authService.getAccessToken(GoogleLoginProvider.PROVIDER_ID).then(accessToken => this.accessToken = accessToken);
+  }
+
+  getGoogleCalendarData(): void {
+    if (!this.accessToken) return;
+
+    this.httpClient
+      .get('https://www.googleapis.com/calendar/v3/calendars/primary/events', {
+        headers: { Authorization: `Bearer ${this.accessToken}` },
+      })
+      .subscribe((events) => {
+        alert('Look at your console');
+        console.log('events', events);
+      });
+  }
+}
+```
+
+### Refresh google Access Token
+
+Once a user is logged in and an access token was obtained, the access token can be refreshed (revoked)
+
+```typescript
+
+import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { GoogleLoginProvider } from "@abacritt/angularx-social-login";
+
+@Component({
+  selector: 'app-demo',
+  templateUrl: './demo.component.html',
+  styleUrls: ['./demo.component.css']
+})
+export class DemoComponent implements OnInit {
+
+  constructor(private authService: SocialAuthService) { }
+
+  refreshToken(): void {
+    this.authService.refreshAccessToken(GoogleLoginProvider.PROVIDER_ID);
+  }
+
+}
+```
+
 ### Subscribe to the authentication state
@@ -143,4 +237,4 @@
 ```javascript
-import { SocialAuthService } from "angularx-social-login";
-import { SocialUser } from "angularx-social-login";
+import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { SocialUser } from "@abacritt/angularx-social-login";
 
@@ -172,3 +266,3 @@ @Component({
 ```html
-<img src="{{ user.photoUrl }}">
+<img src="{{ user.photoUrl }}" referrerpolicy="no-referrer">
 <div>
@@ -180,2 +274,34 @@ <h4>{{ user.name }}</h4>
 
+## Custom Provider
+
+We can use a custom provider, implementing our own logic and needs like the following example:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class MyCustomLoginProvider extends BaseLoginProvider {
+  public static readonly PROVIDER_ID = 'CUSTOM' as const;
+
+  constructor(/* infinite list of dependencies*/) {}
+}
+```
+```typescript
+@NgModule({
+  declarations: [AppComponent, NavbarComponent, DemoComponent],
+  imports: [BrowserModule, FormsModule, SocialLoginModule],
+  providers: [
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: true,
+        providers: [
+          {
+            id: MyCustomLoginProvider.PROVIDER_ID,
+            provider: MyCustomLoginProvider,
+          },
+        ],
+      } as SocialAuthServiceConfig,
+    },
+  ],
+```
+
 ## Specifying custom scopes, fields etc. on initialization
@@ -190,5 +316,6 @@
 
-const googleLoginOptions = {
-  scope: 'profile email'
-}; // https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2clientconfig
+const googleLoginOptions: GoogleInitOptions = {
+  oneTapEnabled: false, // default is true
+  scopes: 'https://www.googleapis.com/auth/calendar.readonly'
+}; // https://developers.google.com/identity/oauth2/web/guides/use-token-model#initialize_a_token_client
 
@@ -195,0 +322,0 @@ const vkLoginOptions = {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

403134

increased by1.2%

Number of lines in readme file

353

increased by56.19%

No dependency changes