beyonk-group / svelte-social-auth Goto Github PK

Woudl be nice if you could provide a typefile so i can use this in a svelte ts project.

I am getting this error when I run this module. I am guessing this is also required by this module.

Error: Cannot find module '@beyonk/async-script-loader'

Do you plan to add other authentication mechnanism to your component ?
(like securesocial for example : http://www.securesocial.ws/guide/getting-started.html)

Hi there,

thanks for the great extension. Just wondering if is possible to make this work with sapper.

I'm getting the following error:

<FacebookAuth> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

using
npm i @beyonk/svelte-social-auth
works
but
npm i beyonk-adventures/svelte-social-auth
does not work, even though it installs. it complains
Error: Cannot find module 'node_modules/@beyonk/svelte-social-auth/index.js'.

I hereby suggest you add the install instructions to the readme.md

I'm getting this error on page load :

{
details: 
"You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."
error: "idpiframe_initialization_failed"
}

any tips on how to fix it?

thank you

Google Auth has several more options that are not exposed.
In particular for Server/Client cases where the user wants to authorize the server to make API calls, being able to obtain a code that the server can use to obtain a token and a renew token is important. The React package react-google-login offers

<GoogleLogin
        clientId="your-client-id"
        onSuccess={handleGoogleResponse}
        onFailure={handleGoogleResponse}
        cookiePolicy={'single_host_origin'}
        accessType='offline' // To get a non-expiring refresh token
        prompt='consent' // To force the code to allow to obtain a refresh-token each time (otherwise only the first in a session will get a refresh-token
        responseType='code' // Obtain a code to pass to the server
      />;

An added benefit is that the code method is safer than passing a token as documented by Google.

async-script-loader expects urls to be an array. The GoogleAuth code makes the call with a single URL. This is easy to fix.

loader( [ {type: 'script',
        url: '//apis.google.com/js/api:client.js'} ],
        () => window['gapi'],
        () => initialise()
      )

This one also doesn't work:

npm i @beyonk/svelte-social-auth --save-dev

For which node/npm version this works?

Hey Antony,

I've been taking a look at the CSS and how things work, and think its a bit overblown based on how Svelte works.

example for FacebookAuth.svelte in the CSS section there is this

button.facebook-auth:disabled {
  background-color: grey;
}

However, svelte by design will add a unique css class thus rendering this inefficient.

button:disabled {
  background-color: grey;
}

this code above would perform the same task without extra dross. I'm not suggesting to remove the class from the html, as someone might want to add further styling via a global CSS.

In addition to this, I find its quite opinionated in the way it has to be displayed. Things like the button color, text color and button width for me should be adaptable without having to fork and re-write the base.

Suggesting something like this:

<script>
export let buttonColor = "#ff9900";
</script>
<button style="--button-color: {buttonColor}"><!-- inner code --></button>

<style>
button {
  background: var(--button-color);
}
</style>

As I said, I'd rather not fork this so I can continue to get updates if there are any, so I'm thinking there should be 4 new attributes

1. buttonColor
2. disabledButtonColor
3. buttonWidth
4. textColor

Before I make a PR with this, I just wanted to run it by you to see what your thoughts are?

Google is shutting down gapi.auth2 support and all users using this library will be rejected

Hi 👋

First of all, I'm not sure if this a problem with the library itself. I might be missing something here.

If that is the case, I would really appreciate it if you could still take the time to help me out and perhaps this issue might serve as documentation to others in the future.

So, the problem I'm getting is the following:

• I've set up the code like the README file exemplifies.
• When I click the button, it opens the Google page for the user's consent.
• After consenting, the page closes.
• Nothing happens on my page. It doesn't redirect, it doesn't log anything.

Here's what the code looks like:

<script lang="ts">
    import Tailwindcss from '../Tailwindcss.svelte';
    import { GoogleAuth } from '@beyonk/svelte-social-auth';
</script>

<style>

</style>

<Tailwindcss/>

<main>
    <div class="bg-white">
        <h1>Login</h1>
        <br/>
        <GoogleAuth clientId={process.env.OAUTH_GOOGLE_CLIENT_ID}
                    on:auth-success={e => console.log(e.detail.user)}
                    on:auth-failure={e => console.log(e)}
        />
    </div>
</main>

I can't figure out why it's not working... Do you see what might be causing this issue?

Thanks in advance :)