https://supertokens.com/ logo
social login without redirect
b

bitwiz

04/14/2023, 8:15 PM
Hi, I have a question. We currently use Web3Auth but think about exchanging it as we really do not need the Web3 actually anymore 😁 But what is awesome about Web3auth is that it actually allows you to use social logins without leaving the page. You can just configure to open the login in a new tab, authenticate the app and the tab closes again. The widget talks to the backend and shows a login success. Is this kind of flow possible with supertokens? Here is a demo: https://demo-app.web3auth.io/
r

rp

04/15/2023, 6:26 AM
hey @bitwiz you can do socail login via a popup instead of a page redirect.
b

bitwiz

04/15/2023, 7:07 AM
Hi @rp thank you for your answer! I will try that out! How tricky is this in general to setup? I am quite good with general web dev but not necessarily with auth flows. Do I get back the details of the logged-in user from the backend then? The nice thing with Web3auth was that it was super easy to set up and you get back a fully populated user object with name, email etc if provided by the social provider.
r

rp

04/15/2023, 7:08 AM
You do get back the access token from the social provider on the backend using which you can fetch any info about the user.
b

bitwiz

04/15/2023, 12:23 PM
Hi, sorry I do not get it. The example says I should overwrite the button todo something else. But in the React demo app I am not able to modify the component or access the button. There is just "{getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}" That should get the login modal? I do not see how I can manipulate this :/
It look like I have to build my custom Login ui to get this done?
r

rp

04/15/2023, 12:25 PM
Checkout the react component override feature in our docs
b

bitwiz

04/15/2023, 12:25 PM
Will do thanks!
Hi! Okay that worked to far. I got the URL and opened it in a new window. But after the sign in i get redirected into nirvana: https://supertokens.com/dev/oauth/undefined?code=dfe9dd2488952a019a86&state=37bbc17dc1e60c77ee4c3 I just use the react example app

https://cdn.discordapp.com/attachments/1096529105702355034/1096807175428505620/image.pngā–¾

r

rp

04/15/2023, 2:42 PM
hey! are you using our dev credentials for social login? You should instead use your own credentials and on the provider's dashboard, set the redirect_uri to point to your app's callback screen
b

bitwiz

04/15/2023, 2:44 PM
This is basically the only thing I changed: I have not entered any credentials so far
<ThirdpartyPasswordlessComponentsOverrideProvider
        components={{
          // In this case, the <ThirdPartyPasswordlessHeader_Override>
          // will render the original component
          // wrapped in a div with an octocat picture above it.

          ThirdPartyPasswordlessHeader_Override: ({ DefaultComponent, ...props }) => {
            return (
              <div>
                <img src={"https://avatars.githubusercontent.com/u/583231"} height={50} />
                <DefaultComponent {...props} />
              </div>
            );
          },
          ThirdPartySignInAndUpProvidersForm_Override: ({ DefaultComponent, ...props }) => {
            console.log("props", props);
            const url = getThirdPartyAuthorisationURLWithQueryParamsAndSetState({
              providerId: "github",
            });
            console.log("url", url);

            return (
              <div>
                <button onClick={async () => window.open(await url)}>Hamlo</button>
                <DefaultComponent {...props} />
              </div>
            );
          },
        }}
      >
r

rp

04/15/2023, 2:45 PM
no i mean on the backend. What credentials are you using?
b

bitwiz

04/15/2023, 2:46 PM
Ah I see: You mean those:
ThirdPartyPasswordless.Google({
                    clientId: "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
                    clientSecret: "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",
                }),
                ThirdPartyPasswordless.Github({
                    clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
                    clientId: "467101b197249757c71f",
                }),
                ThirdPartyPasswordless.Apple({
                    clientId: "4398792-io.supertokens.example.service",
                    clientSecret: {
                        keyId: "7M48Y4RYDL",
                        privateKey:
                            "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
                        teamId: "YWQCXGJRJL",
                    },
                }),
??? I changed nothing there
r

rp

04/15/2023, 2:46 PM
yup
you need to change those keys to your own
which you can get from the social provider's dashboard
and in there, you need to set the callback URL to point to your app's frontend
b

bitwiz

04/15/2023, 2:47 PM
Ah I see.
I was hoping that SuperTokens supports that out of the box. With web3auth it just works. They use their own keys when using the sign in in a new tab. You really just have to configure the frontend component and it works. This is super important for us. We develop a plugin for shopify that runs in the stores of the shopify merchannts. So our app runs under hundreds of domains. It looks like this is is not so straight forwards to realize with supertokens?
Also I think that the routing could be problematic. Our app is basically embedded in a Shopify store. We cannot just use routes like /auth
Do you see an easy way to work around this or is supertokens not for us then?
r

rp

04/15/2023, 2:54 PM
Hmm. I see. I'll have to check and get back to you on Monday. Perhaps @sattvikc can help here.
the problem of a dynamic redirect uri will be there for mostly any auth provider.
it should be definitely possible though.
just need to have a workaround to make the redirect uris dynamic. Similar to what we do for our demo apps.
b

bitwiz

04/15/2023, 2:59 PM
Thank you so much! If you need to understand the setup better: https://shopify.dev/docs/apps/online-store/theme-app-extensions. With shopify extensions you basically bundle your app and inject into Liquid, shopifys templating language. The result is called an "app block". This gets integrated into the shop of a merchant that installed the app. The downside is you really just control the scope of your app and not the routes.
That sound great!
r

rp

04/15/2023, 2:59 PM
we shall get back to you on monday
b

bitwiz

04/15/2023, 3:00 PM
But in general I can only recommend you guys to have a look at the web3auth flow. It is just super convenient. There could be a business opportunity for you guys šŸ™‚
Thanks! Have a great weekend šŸ™‚
r

rp

04/15/2023, 3:01 PM
we do plan on adding web3 auth next year!
to you too šŸ™‚
b

bitwiz

04/15/2023, 3:01 PM
You mean auth with ethereum or really the product of the companny web3auth?
r

rp

04/15/2023, 3:02 PM
im not sure at the moment
b

bitwiz

04/15/2023, 3:02 PM
Because I talk about the product of the company šŸ™‚ https://web3auth.io/
I posted the link to their demo in my original question: https://demo-app.web3auth.io/
r

rp

04/15/2023, 3:03 PM
i see.
b

bitwiz

04/15/2023, 3:04 PM
All of the social auth providers work without me doing anything. As I said. business opportunity for you guys. I never saw that so easily solved. But we do not need the wallet part anymore. I leave you to it then. Thanks for your help so far ā¤ļø
r

rp

04/15/2023, 3:07 PM
Thanks. We will get back to you on Monday šŸ™‚
@sattvikc will help out.
s

sattvikc

04/17/2023, 1:22 PM
hi @bitwiz , we have added an example for login using pop-up. Please check if this helps - https://github.com/supertokens/supertokens-auth-react/tree/0.31/examples/with-thirdparty-popup
b

bitwiz

04/17/2023, 2:18 PM
Guys this is AWESOME!! This is the best support I have ever experienced ā¤ļø Thank you so much!! Can you explain a little bit what you have done? I see the ThirdPartySignInAndUpProvidersForm_Override and that you wait for the close event of the popup. That makes sense. But how is the close event triggered in the popup? Can you give a bit of context? Does it have todo with the
authorisationURL: `${getWebsiteDomain()}/auth/callback/${provider.id}`}
Or did you change something in the backend or on your callback page? Thank you again so much!
r

rp

04/17/2023, 2:46 PM
When the above callback page is loaded (which is a frontend route), we consume the auth token and then close the popup
Essentially we close the popup in the signinup function override which is called on the callback screen
b

bitwiz

04/17/2023, 2:54 PM
Just found the line of code myself šŸ˜„ So this part is actually executed on the callback page?? This is super smart!
Thank you so much guys
r

rp

04/17/2023, 2:59 PM
Yup. It is executed by the callback page indeed.
thank you! hope this helps!
b

bitwiz

04/17/2023, 3:03 PM
Still learning your framework but now it starts to make sense. super smart. That will definitely help. One last question: If I want to get my own Oauth keys for production use I have to use my core connectionURI?

https://cdn.discordapp.com/attachments/1096529105702355034/1097537905972490322/image.pngā–¾

So I have to provide this as callback when setting up oauth with google?
r

rp

04/17/2023, 3:05 PM
Well, those are two different things. The core connection is to connect to the core which interacts with the db in which ST related info is saved. Whereas the social login credentials (oauth keys) are provided by the social login provider for the purpose of talking to the provider (which is different from the core)
> So I have to provide this as callback when setting up oauth with google? No. The callback points to your frontend domain where your app is hosted
b

bitwiz

04/17/2023, 3:08 PM
Okay now I am confused šŸ˜„ Let me elaborate:
As stated in the beginning our app is embedded and runs in shopify stores under a lot of domains and we cannot manipulate the routes. so there an be no static callback url. But I think what you mean is that there should be some endpoint hosted by us, where google can send back the user
r

rp

04/17/2023, 3:17 PM
yes
b

bitwiz

04/17/2023, 3:17 PM
Sorry hit enter accidentally. Will edit it
But I thought this endpoint is already hosted by you and that is where the
window.close()
is executed?
r

rp

04/17/2023, 3:18 PM
no. That happens on your frontend.
So you will need to do something like this. Let's say that the shopify domain is
dynamic.com
and your static hosted endpoint is
static.com
.
actullly, before i dive in, i have a question
so your app is not hosted on any static domain? I thought it would be in sort of a webview / iframe inside of shopify - is that not the case?
b

bitwiz

04/17/2023, 3:26 PM
Ifames are possible but discouraged. The app is bundled via webpack and uploaded to shopify. They embed the app in the store frontend when a merchant installs the app. Your code is basically injected via src tag into the shop. So I could use an Iframe there but as thats super tricky with responsiveness. This app Is where I want to render the login buttons. We actually just want to build an app that makes it more easy for merchants to get people to signup to their newsletter via social logins. But thats it. We cannot control routes on the shop.
Could'nt I just host a second app with the callback url and just close it when google sends the user there?
And listen to the close event from the embedded shopify app?
Sorry again for the lengthy conversation. I thought I had it figured out šŸ˜…
r

rp

04/17/2023, 3:37 PM
i don't think you can do cross domain window events listening. There are ways to get this to work, but will require a bit of work: - On the shopify app, you can open a popup window to go to google like you are doing now. - Google redirects the user back to your statically hosted site which will call the signinup function to your backend. This will also create a supertokens session between that statically hosted site and your backend. However, the above won't create a session between your shopify app and your backend, which is what you want. In order to do that, you will need to somehow transfer the session from your static site to the shopify app dynamically. I can think of one way of doing this: - When the shopify app opens the popup for google, the URL that is opened contains a
state
query param which our SDK generates. You can save this
state
param in the shopify app (in memory) before opening the popup window. - When google sends the user back to the callback page on your static app, this same state param is also present in the callback URL. You can save this state param in localstorage of your static site. So at this point, you have a common state param stored in your shopify app (in memory) and the static site. - After the static site is logged in (after it has a session with the backend), it could send the stored state param to your backend. On the backend, you create an API which accepts this state param along with verifying the session. - Post session verification, this API has the userId and the state param. It can store this mapping in memory. - Meanwhile the shopify app can poll the backend with the state param, and if that API sees that there is a mapping of this state param to a userID, it can simply create a new (header based / non cookie based) session and return a 200 to the frontend - thereby logging in the user.
b

bitwiz

04/17/2023, 3:40 PM
That is actually exactly how I thought I have to do it before I thought that your connection URI would also be the callback domain šŸ˜„ That makes absolute sense and should not be to hard I guess!!
Thank you so much again. You guys are awesome!
r

rp

04/17/2023, 3:41 PM
great! :))