Code Monkey home page Code Monkey logo

nuxt-social-logins's Introduction

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:

yarn add @glarus-labs/nuxt-social-logins

or

npm i @glarus-labs/nuxt-social-logins

Setup

Add ย @glarus-labs/nuxt-social-logins under modules in nuxt.config.js

// nuxt.config.js

{
  modules: [
    '@glarus-labs/nuxt-social-logins',
  ],
}

Configuration can be passed along with the module declaration:

{
  modules: [
    ['@glarus-labs/nuxt-social-logins', {
        // options
    }]
  ],
}

or in a separate socialLogins key:

{
  modules: [
    '@glarus-labs/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)"
/>

nuxt-social-logins's People

Contributors

flushbg avatar rmj-s avatar lincolnlemos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.