Plugin fails in NustJs

[bekee]

Describe the bug I get this error self is not defined when I import the the provider in a component

Kindly review why or give a guide on how to use in NuxtJs

[diadal]

can you share your code with https://codepen.io

[diadal]

import { Providers } from 'universal-social-auth' import { ProderT } from 'universal-social-auth/dist/providers' should without any issue

[bekee]

I added a plugin socialauth.js

import Vue from 'vue' import axios from 'axios' import UniversalSocialauth from 'universal-social-auth'

const options = { providers: {
google: { clientId: process.env.GOOGLE_ID, redirectUri: process.env.API_HOST + '/auth/google/callback' }, facebook: { clientId: process.env.FACEBOOK_ID, redirectUri: process.env.API_HOST + '/auth/facebook/callback' },

}

}

const Oauth = new UniversalSocialauth(axios, options)

Vue.prototype.$Oauth = Oauth

the imported the plugin to nuxt.config.js

{ src: '~/plugins/mixins/socialauth', ssr: false },

then I imported the provider in a component

// import { Providers} from 'universal-social-auth' // Button M2 import { Facebook, Google} from 'universal-social-auth' OR import { Facebook, Google, /Github , Twitter/} from 'universal-social-auth/dist/providers'

any the imports in component generates the error "self is not defined"

I'm using "universal-social-auth": "^0.1.9", "nuxt": "^2.14.0",

[diadal]

it work great with nuxt check https://github.com/diadal/universal-social-auth-test-nuxt

[bekee]

https://github.com/diadal/universal-social-auth-test-nuxt The link is invalid, can you resend

[diadal]

have make it public it should work now https://github.com/diadal/universal-social-auth-test-nuxt

[diadal]

am sure is a little typo in your project just check the test project it should worked

[diadal]

i guess you get it worked by now

[diadal]

you can reopen the issue if not

[bekee]

Unfortunately I couldn't, this plugin is on typescript whereas my project is on JavaScript and keeps returning same error, I had pop for vue-social-auth

[diadal]

just remove all the typescript code line it work without issue

[diadal]

https://github.com/diadal/universal-social-auth-test-nuxt-js pure nuxtjs javascript

[ShadXst]

Faced the same issue on ver. 0.2.5.

ReferenceError
self is not defined
in node_modules/universal-social-auth/dist/index.js
@1:282

[diadal]

check this out download and run https://github.com/diadal/universal-social-auth-test-nuxt-js then check with your code

[ShadXst]

Yes, it works. But I can't understand exactly where the problem is coming from, because I pasted my solution for front-end(client) from this link. :)

[diadal]

Yes, it works. But I can't understand exactly where the problem is coming from, because I pasted my solution for front-end(client) from this link. :)

can you share your code

[Ermekm]

The example you are giving is running in client mode. Is it possible to make it work in SSR mode?

[san4io]

I use nuxt2 with composition api, have same issue, I've created plugin with mode: client

My plugin file:

import axios from 'axios'
import UniversalSocialauth from 'universal-social-auth'
import { defineNuxtPlugin } from '@nuxtjs/composition-api'
import '@nuxt/types'

declare module '@nuxt/types' {
    interface Context {
        $social: UniversalSocialauth;
    }
}

const options = {
    providers: {
        google: {
          clientId: '****',
          redirectUri: 'http://localhost:3000/social/google'
        },
        facebook: {
          clientId: '****',
          redirectUri: 'http://localhost:3000/social/facebook'
        },
    },
}

export default defineNuxtPlugin(ctx => {
    ctx.$social = new UniversalSocialauth(axios, options)
})

While navigating from client - OK. If I'm making direct refresh on that page(SSR). I receive:

@diadal I believe in nuxt.config change to ssr: true, and you'll be able to reproduce

[san4io]

Any news?

[ZajdeR]

The issue on SSR mode is only when passing providerData. You can add it as object. I use the same that are in repo, then problem is solved.