Search for a command to run...
Google Auth in Wasp with TypeScript
Full stack aficionado, passionate about making tech simpler, faster, and enjoyable. Sharing the love with open source and spreading the knowledge ! 🎉🚀🌐📚
No comments yet. Be the first to comment.
A Practical Guide for Developers to Efficiently Understand and Contribute to New Projects
What is Zed? Zed is a new kid on the block in the IDE business but seems to be causing some people to talk about it. https://twitter.com/adamwathan/status/1648867721944104960?s=20 From the first look, it appears to be focusing on blazing speed (jus...
“Because he's the hero Gotham deserves, but not the one it needs right now." - Jonathan Nolan, The Dark Knight
What is Wasp? Imagine modern monorepos. If you are not using typesafe solutions like tRPC , chances are - you know the pain of synchronizing your types between the backend and front end. More than that - you are probably also aware that creating new ...
When using Google OAuth in Wasp project, you might notice that behind the scenes, whenever you are logging in the user, creates the user for you, if it doesn't exist. It does so with very minimal user fields, but what if you need additional user information, such as profile image or full name?
Let's take care of that and learn a thing or two about Wasp lang.
main.wasp file:entity User {=psl
id Int @id @default(autoincrement())
email String? @unique
password String?
isEmailVerified Boolean @default(false)
emailVerificationSentAt DateTime?
passwordResetSentAt DateTime?
profileImage String?
fullName String?
stripeId String?
checkoutSessionId String?
hasPaid Boolean @default(false)
sendEmail Boolean @default(false)
datePaid DateTime?
credits Int @default(3)
relatedObject RelatedObject[]
externalAuthAssociations SocialLogin[]
psl=}
Once added, run wasp db migrate-dev so Wasp takes care of all the db migrations, and relaunch your server.
main.wasp add a new dependency @types/passport-google-oauth20. At the time of writing this article, the actual version is 2.0.11 but go ahead and install the latest one.("@types/passport-google-oauth20", "2.0.11")
The reason why you install @types/passport-google-oauth20 is because Wasp is using passport to handle authentication strategy etc behind the scenes, so that's exactly the types that are used in the backend and that you can expect to be returned.
Create a file under src/server/auth/google.ts
Add new function getUserFields alongside with type import:
import { Profile } from "passport-google-oauth20";
export async function getUserFields(
_: unknown,
args: { profile: Profile }
) {
const userFields = {
email: args.profile._json.email,
profileImage: args.profile._json.picture,
fullName: args.profile._json.name,
};
return userFields;
}
getUserFields function in main.wasp file, by adding getUserFieldsFn property to auth.methods.google object, like so: auth: {
userEntity: User,
externalAuthEntity: SocialLogin,
methods: {
google: {
getUserFieldsFn: import { getUserFields } from "@server/auth/google.js", // <-- add `getUserFieldsFn` property
configFn: import { config } from "@server/auth/google.js",
},
},
onAuthFailedRedirectTo: "/",
},
Function getUserFields is a special function, that Wasp is using to retrieve any user fields that will be added to the database. The second argument of this function is to receive an object, that contains profile of type Profile . This is what is being "passed" to you by Wasp , so that you can "cherry-pick" what you want to be saved into your User record when one will be created.
Whatever object you will return from this function, this is what will be stored in the User table, under the new row. As you can see, I am retrieving profileImage and fullName properties from args.profile._json. object.
You can read more about getUserFields in the linked article, but it's only covering JavaScript file, not TypeScript, so hoping this article helps you to annotate. your codebase better, until Wasp provides you with a type export by itself.
Follow me here on 📖 Hashnode: https://blog.oleggulevskyy.dev/
Follow me on 🐦 Twitter: https://twitter.com/preacher_rourke
I am sharing all the cool stuff I find, daily.