Marques
06/09/2022, 8:42 PMMarques
06/09/2022, 8:43 PMsignInUpPOST
?rp_st
06/10/2022, 4:00 AMMarques
06/10/2022, 9:27 AMrp_st
06/10/2022, 9:27 AMMarques
06/10/2022, 9:29 AMThirdParty.init({
signInAndUpFeature: {
providers: [
ThirdParty.Google({
clientId:
'SOMECLIENTID',
clientSecret: 'SOMECLIENTSECRET',
authorisationRedirect: {
params: {
redirect_uri:
'http://localhost/auth/callback/social/google',
},
},
}),
],
},
override: {
apis: (oI) => {
return {
...oI,
signInUpPOST: async function (input) {
if (oI.signInUpPOST === undefined) {
throw Error('Should never come here');
}
try {
await oI.signInUpPOST(input);
} catch (err) {
console.log(err);
}
let resp = await oI.signInUpPOST(input);
if (resp.status === 'OK') {
if (resp.createdNewUser) {
let googleAccessToken =
resp.authCodeResponse['access_token'];
let user = resp.user;
let session = resp.session;
const hexPerm = pm.createPermissionAttribute(
Permissions.CREATE_LINK,
Permissions.EDIT_LINK,
);
const newUser = await this.prisma.user.create({
data: {
uid: 'TEST',
email: user.email.toLowerCase(),
username: user.email.toLowerCase(),
permissions: hexPerm,
},
});
// TODO: store info about the user in your own db
// TODO: You can modify the access token payload like this:
await session.updateAccessTokenPayload({
perms: newUser.permissions,
});
}
}
return resp;
},
};
},
},
}),
rp_st
06/10/2022, 9:30 AMhttp://localhost/auth/callback/social/google
is correct?Marques
06/10/2022, 9:31 AMrp_st
06/10/2022, 9:31 AMMarques
06/10/2022, 9:31 AMawait http.post('/auth/signinup', {
redirectURI: 'http://localhost/auth/callback/social/google',
thirdPartyId: 'google',
code: `${code}`
});
Marques
06/10/2022, 9:32 AMrp_st
06/10/2022, 9:32 AMMarques
06/10/2022, 9:32 AMawait http.get('/auth/authorisationurl?thirdPartyId=google').then((res) => {
if(res.data.status === 'OK') {
goto(res.data.url);
// console.log(res.data);
}
});
rp_st
06/10/2022, 9:33 AMredirect_uri=...
to the res.data.url before calling the goto functionMarques
06/10/2022, 9:34 AMrp_st
06/10/2022, 9:34 AMrp_st
06/10/2022, 9:35 AMMarques
06/10/2022, 9:38 AMMarques
06/10/2022, 9:39 AMhttp://localhost/auth/callback/social/google?code=randomcode
which then I run this code : await http.post('/auth/signinup', {
redirectURI: 'http://localhost/auth/callback/social/google',
thirdPartyId: 'google',
code: `${code}`
});
but then it throws the 400rp_st
06/10/2022, 9:42 AMMarques
06/10/2022, 9:43 AMrp_st
06/10/2022, 9:44 AMrp_st
06/10/2022, 9:45 AMauthorisationRedirect: {
params: {
redirect_uri:
'http://localhost/auth/callback/social/google',
},
},
Part and try again?Marques
06/10/2022, 9:47 AMrp_st
06/10/2022, 9:47 AMrp_st
06/10/2022, 9:47 AMMarques
06/10/2022, 9:47 AMrp_st
06/10/2022, 9:47 AMMarques
06/10/2022, 9:48 AMrp_st
06/10/2022, 9:48 AMrp_st
06/10/2022, 9:48 AM}
try {
await oI.signInUpPOST(input);
} catch (err) {
console.log(err);
}
let resp = await oI.signInUpPOST(input);
you are calling oI.signInUpPOST
twiceMarques
06/10/2022, 9:49 AMrp_st
06/10/2022, 9:49 AMMarques
06/10/2022, 9:49 AMrp_st
06/10/2022, 9:50 AMoI.signInUpPOST(input)
?Marques
06/10/2022, 9:50 AMMarques
06/10/2022, 9:50 AMMarques
06/10/2022, 9:51 AMrp_st
06/10/2022, 9:53 AMMarques
06/10/2022, 9:53 AMMarques
06/10/2022, 9:53 AMrp_st
06/10/2022, 9:53 AMrp_st
06/10/2022, 9:54 AMMarques
06/10/2022, 9:55 AMrp_st
06/10/2022, 9:56 AMMarques
06/10/2022, 9:56 AMMarques
06/10/2022, 9:56 AMrp_st
06/10/2022, 9:57 AMMarques
06/10/2022, 9:57 AMMarques
06/10/2022, 9:58 AMrp_st
06/10/2022, 9:59 AMrp_st
06/10/2022, 9:59 AMMarques
06/10/2022, 9:59 AMrp_st
06/10/2022, 10:00 AMrp_st
06/10/2022, 10:00 AMMarques
06/10/2022, 10:00 AMMarques
06/10/2022, 10:00 AMrp_st
06/10/2022, 10:02 AMrp_st
06/10/2022, 10:03 AMrp_st
06/10/2022, 10:03 AMrp_st
06/10/2022, 10:03 AMrp_st
06/10/2022, 10:04 AMMarques
06/10/2022, 10:09 AMrp_st
06/10/2022, 10:09 AMMarques
06/10/2022, 10:09 AMMarques
06/10/2022, 10:09 AMrp_st
06/10/2022, 10:15 AMnkshah2
06/10/2022, 10:17 AMMarques
06/10/2022, 10:17 AMMarques
06/10/2022, 10:17 AMMarques
06/10/2022, 10:17 AMMarques
06/10/2022, 10:17 AMnkshah2
06/10/2022, 10:17 AMMarques
06/10/2022, 10:18 AMnkshah2
06/10/2022, 10:33 AMMarques
06/10/2022, 10:36 AMMarques
06/10/2022, 10:36 AMnkshah2
06/10/2022, 10:46 AMnkshah2
06/10/2022, 10:46 AMMarques
06/10/2022, 10:47 AMMarques
06/10/2022, 10:47 AMnkshah2
06/10/2022, 10:49 AMnkshah2
06/10/2022, 10:56 AMMarques
06/10/2022, 11:10 AMnkshah2
06/10/2022, 11:11 AMMarques
06/10/2022, 11:21 AMMarques
06/10/2022, 11:22 AMnkshah2
06/10/2022, 11:22 AMMarques
06/10/2022, 11:22 AMMarques
06/10/2022, 11:22 AMnkshah2
06/10/2022, 11:25 AMnkshah2
06/10/2022, 11:25 AMMarques
06/10/2022, 11:36 AMnkshah2
06/10/2022, 11:38 AMMarques
06/10/2022, 11:39 AMMarques
06/10/2022, 11:39 AMnkshah2
06/10/2022, 11:40 AMMarques
06/10/2022, 11:42 AMMarques
06/10/2022, 11:42 AMMarques
06/10/2022, 11:42 AMMarques
06/10/2022, 11:42 AMSuperTokens.init({apiDomain: 'http://localhost:3000', apiBasePath: '/auth', enableDebugLogs: true});
if(await SuperTokens.doesSessionExist()) {
// TODO: get information about the user
await fetchUserData();
}else {
await SuperTokens.signOut();
// TODO: set user store to be empty.
user.set({});
}
nkshah2
06/10/2022, 11:43 AMMarques
06/10/2022, 11:43 AMnkshah2
06/10/2022, 11:43 AMMarques
06/10/2022, 11:44 AMnkshah2
06/10/2022, 11:45 AMMarques
06/10/2022, 11:45 AMMarques
06/10/2022, 11:45 AMnkshah2
06/10/2022, 11:45 AMMarques
06/10/2022, 11:45 AMnkshah2
06/10/2022, 11:46 AMnkshah2
06/10/2022, 11:46 AMMarques
06/10/2022, 11:46 AMnkshah2
06/10/2022, 11:46 AMMarques
06/10/2022, 11:48 AMMarques
06/10/2022, 11:48 AMnkshah2
06/10/2022, 11:48 AMnkshah2
06/10/2022, 11:48 AMMarques
06/10/2022, 11:48 AMnkshah2
06/10/2022, 11:50 AMThirdParty.Google({
clientId:
'SOMECLIENTID',
clientSecret: 'SOMECLIENTSECRET',
authorisationRedirect: {
params: {
redirect_uri:
'http://localhost/auth/callback/social/google',
},
},
}),
And youve changed this to use localhost:8080 as well I assume?Marques
06/10/2022, 11:51 AMMarques
06/10/2022, 11:51 AMconst googleSubmit = async () => {
const googleUrl = await http.get('/auth/authorisationurl?thirdPartyId=google');
const data = googleUrl.data;
// console.log(data);
goto(`${data.url}&redirect_uri=http://localhost:8080/auth/callback/social/google`);
};
Marques
06/10/2022, 11:52 AMnkshah2
06/10/2022, 11:52 AMgoogleUrl
?nkshah2
06/10/2022, 11:52 AMconst data = googleUrl.data;
I meanMarques
06/10/2022, 11:54 AMnkshah2
06/10/2022, 11:56 AMMarques
06/10/2022, 11:57 AMMarques
06/10/2022, 11:57 AMnkshah2
06/10/2022, 11:58 AMnkshah2
06/10/2022, 11:58 AMnkshah2
06/10/2022, 11:59 AM${data.url}&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fauth%2Fcallback%2Fsocial%2Fgoogle
);Marques
06/10/2022, 12:00 PMMarques
06/10/2022, 12:00 PMnkshah2
06/10/2022, 12:00 PMMarques
06/10/2022, 12:01 PMnkshah2
06/10/2022, 12:01 PMMarques
06/10/2022, 12:02 PMnkshah2
06/10/2022, 12:06 PMnkshah2
06/10/2022, 12:06 PMMarques
06/10/2022, 12:06 PMnkshah2
06/10/2022, 1:47 PMfrontend/src/routes/auth/callback/social/google.svelte
-
You are not checking whether the code is running on the server side or not. This means that it tries to read the code
from the URL on the server first and calls the /auth/signinup
API from the server itself.
When I changed the code to:
if (typeof window !== "undefined") {
...
// Read code
// Call sign in up API here
...
}
The flow worked with GoogleMarques
06/10/2022, 1:48 PMnkshah2
06/10/2022, 1:49 PMMarques
06/10/2022, 1:49 PMnkshah2
06/10/2022, 1:51 PM<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { http } from '../../../../util/http';
if (typeof window !== "undefined") {
const code = $page.url.searchParams.get('code');
console.log("OG CODE", code)
if (typeof window !== "undefined") {
console.log("WI CODE", (new URL(window.location)).searchParams.get("code"))
}
(async () => {
await http.post('/auth/signinup', {
redirectURI: 'http://localhost:8080/auth/callback/social/google',
thirdPartyId: 'google',
code: `${code}`
});
})().catch((err) => {
// console.error(err);
});
}
</script>
nkshah2
06/10/2022, 1:51 PMnkshah2
06/10/2022, 1:52 PMMarques
06/10/2022, 1:54 PMMarques
06/10/2022, 1:54 PMnkshah2
06/10/2022, 1:56 PMMarques
06/10/2022, 1:56 PMMarques
06/10/2022, 1:56 PMnkshah2
06/10/2022, 1:59 PMMarques
06/10/2022, 2:03 PMnkshah2
06/10/2022, 2:04 PMyarfink
06/10/2022, 10:52 PMauthorisationRedirect: { redirect_uri }
object to the ThirdParty recipe
- For some reason, pre-encoding the URL in the body when sending the request to verify the callback, would cause an error too
- He didn't have the rid
header set
so in order of flow, the changes would be:
login.svelte const googleUrl = await http.get('/auth/authorisationurl?thirdPartyId=google');
supertokens.service.ts ts
ThirdParty.Google({
clientId: 'ID',
clientSecret: 'SECRET',
authorisationRedirect: {
params: {
redirect_uri: 'http://localhost:8080/auth/callback/social/google'
}
}
}),
login.svelte goto(googleUrl.data.url) // redirect straight to url provided from our API
google.svelte ts
<script lang="ts">
import { browser } from '$app/env';
import { page } from '$app/stores';
import { http } from '../../../../util/http';
if (browser) {
const code = $page.url.searchParams.get('code');
http.post(`/auth/signinup`, {
redirectURI: 'http://localhost:8080/auth/callback/social/google',
thirdPartyId: 'google',
code
}, {
headers: {
rid: 'thirdparty'
}
});
}
</script>
I'm pretty sure you picked up the above points though, and fixed those things. He didn't share with me the changes you sent to him so I'm not sure how much progress you guys made, but here's some notes on svelte/frontend as he mentioned you guys might put out a svelte template:
- redaxios works fine, it's a nice wrapper for the native fetch calls in the browser, so the ST SDK has no issue intercepting those calls. I would imagine other wrappers would also work as long as they don't manipulate the native fetch APIs
- in svelte you can (my approach is to) initialise supertokens in a module tag in the layout, and put it in an if (browser)
block so it doesn't try and run it server side. This way, ST will always be ready before any fetch calls are made, and its very easy to plug global user state into your web app this way
// __layout.svelte
// The combination of a load function, within a module script, within a layout component, means that this function will be the very first thing to run when the user navigates to any page on the website, and it will be run once only
<script context="module" lang="ts">
import SuperTokens from 'supertokens-website';
import { browser } from '$app/env';
import type { LoadEvent } from '@sveltejs/kit';
export async function load({}: LoadEvent) {
if (browser) {
SuperTokens.init({
apiDomain: 'http://localhost:3000',
apiBasePath: '/auth',
enableDebugLogs: true,
autoAddCredentials: true
});
console.log("----------- SUPERTOKENS INITIALISED ---------------")
if (SuperTokens.doesSessionExist()) {
// Session cookies exist, try refreshing tokens?
} else {
// redirect to login?
}
}
return {};
}
</script><main><slot /></main>
hope that was at least mildly insightful :)nkshah2
06/11/2022, 4:43 AMrp_st
06/11/2022, 5:39 AM