Nuxt Social Logins

A client-side integration of the Google Sign-In SDK and Facebook Javascript SDK for Nuxt.js.
It allows the user to authenticate with Google or Facebook, and returns the active profile data to the calling application, so it could be handled according to the developer's needs.

Quick Links

1. Installation
2. Setup
3. Configuration
4. How to use
5. Components

Install

Install the package:

npm i @hamza-bentahar/nuxt-social-logins

Setup

Add  @hamza-bentahar/nuxt-social-logins under modules in nuxt.config.js

// nuxt.config.js

{
  modules: [
    '@hamza-bentahar/nuxt-social-logins',
  ],
}

Configuration can be passed along with the module declaration:

{
  modules: [
    ['@hamza-bentahar/nuxt-social-logins', {
        // options
    }]
  ],
}

or in a separate socialLogins key:

{
  modules: [
    '@hamza-bentahar/nuxt-social-logins',
  ],
  socialLogins: {
      // options
  }
}

Configuration

By default, all login providers will be disabled unless you pass configuration for them in the module options. If enabled, each provider will register as a separate plugin in the Vue prototype.

Note: Since the plugin is intended to only be used from the client, it isn't available in the context of the application (e.g. in AsyncData())

• Facebook

To enable facebook authentication, pass the facebook object in the options. This enables the use of this.$fbAuth inside your app

{
	facebook: {
		appId: `YOUR_APP_ID`;
	}
}

• Google

To enable google authentication and use this.$googleAuth, pass the google object in options. It also enables the usage of GoogleButton component..

{
	google: {
		clientId: `YOUR_CLIENT_ID`;
	}
}

How to use

If $googleAuth and $fbAuth are enabled in the Vue prototype, they both export a set of functions that are wrappers around the SDK functionality. All functions have no parameters and return promises.

The format of the response the promises resolve to is:

Auth response object:

{
    signedIn: boolean,
    userData: {
        id: string,
        firstName: string,
        lastName: string,
        email: string
    }
}

init()

Best used when the page loads, for example in the layout or index page mounted() hook. It checks if the user is currently authenticated, and returns the auth response as an object.

Example:

// index.vue

 async mounted() {
      const res = await this.$googleAuth.init();
      if (res.signedIn) {
        console.log(res.userData.id);
        console.log(res.userData.firstName);
        console.log(res.userData.lastName);
        console.log(res.userData.email);
      }

      // do something with response
  }

signIn()

Attempts to log the user in. Opens a dialog, requesting their confirmation if it hasn't already been granted. Returns the auth response on resolve, or the error on reject.

Example:

// some-component.vue

 async signIn() {
     try {
        const res = await this.$googleAuth.signIn();
        if (res.signedIn) {
            console.log(res.userData.id);
            console.log(res.userData.firstName);
            console.log(res.userData.lastName);
            console.log(res.userData.email);
        }

        // do something with response
    } catch(e) {
        console.log(e);
    }
  }

signOut()

Attemps to log the user out. Returns a success message on resolve, and an the error on reject.

Example:

// some-component.vue

 async signOut() {
     try {
        const res = await this.$googleAuth.signOut();
        console.log(res);
    } catch(e) {
        console.log(e);
    }
  }

Components

The module also includes a couple of premade default button components that can be used for user authentication. They both can receive buttonText and customClass to override the default one as properties.

Style structure:

.custom-class {
    /* custom styles */
}
.custom-class .icon {
    /* custom styles for button icon */
}
.custom-class .title {
    /* custom styles for the button text */
}

GoogleButton:

A default google sign-in button. Fires the $googleAuth.signIn() function on click, and emits the response or error as events.

Example:

<google-button 
    :button-text="'Your custom text'" 
    :custom-class="'custom-class'" 
    @signed-in:"onGoogleSignedIn(res)"
    @signed-in-error: "onGoogleInError(err)"
/>

FacebookButton:

A default facebook sign-in button. Fires the $fbAuth.signIn() function on click, and emits the response or error as events.

Example:

<facebook-button 
    :button-text="'Your custom text'" 
    :custom-class="'custom-class'" 
    @signed-in:"onFacebookSignedIn(res)"
    @signed-in-error: "onFacebookSignInError(err)"
/>