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.
Install the package:
yarn add @glarus-labs/nuxt-social-logins
or
npm i @glarus-labs/nuxt-social-logins
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
}
}
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())
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`;
}
}
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`;
}
}
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:
{
signedIn: boolean,
userData: {
id: string,
firstName: string,
lastName: string,
email: string
}
}
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
}
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);
}
}
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);
}
}
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 */
}
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)"
/>
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)"
/>