Create Calendar Events in React With Google Calendar API and Supabase (Supabase Providers Tutorial)

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we will set up a Supabase project and link it to a Google OAuth provider. This will allow us to authenticate with Google and access the Google Calendar API. Whether you're a beginner or an experienced developer, this video will show you how to create a React application that uses the Google Calendar API to create events. This video is also a great introduction to using Supabase providers (Supabase OAuth 2.0 providers). The concepts discussed in this video can help with any OAuth provider in Supabase. Supabase OAuth authentication is also incredibly useful because you can use the same logged in user to manage other Supabase services (such as database or large file storage).
Final code: github.com/coopercodes/Google...
Business inquiry? Email [e-mail]
0:00 Project Demo
1:17 Supabase and Google setup
6:50 Initialize Supabase in React
9:27 Setup Google sign in / sign out
16:22 Handling Date inputs (start / end of event)
18:47 Handling text inputs (even name / description)
20:25 Create Google Calendar event
28:05 Testing event creation (thanks for watching!)

[@angus6858]

Just saved me a few hours of manual configuration for my project! Super insightful and easy to follow. Thanks mate.

[@clarissadesimoni]

i'm at 8:50 (haven't watched the whole tutorial yet but it's very well explained so far) and when you said "merry christmas even if you're watching this 6 months later" i noticed tomorrow it's exactly 6 months from the publication date lmao

[@zaidtausif]

Awesome video.. used this as a basis for TH-cam data Api and it worked wonders. Spent a week looking everywhere but this video cleared supabase oauth and api alltogether for me.

[@ilkoTheTiger]

Been through the entire Google Documentation of Calendar API, 2 years of JavaScript experience, keen with mern stack and still lost 2 weeks to build the app, this literally unleashed me, cheers!

[@kresimircosic3753]

Google docs are absolute garbage, haven't such a shitty API and docs in a very long time.

[@user-hy4yd6nw9g]

Great tutorial (Exactly the video I was searching for :)

[@tobotis2658]

Exactly the video I was searching for :)

[@CooperCodes]

Glad that it was helpful, thank you for watching!

[@paulthomas1052]

Great tutorial with a fantastic mix of technologies. Very useful - thanks :)

[@CooperCodes]

Thanks for watching! Glad you found it useful

[@kandets_dev]

You are a lifesafer!

[@afacery]

That is awesome man, keep going with your amazing work. We learn a lot from u :))

[@CooperCodes]

Glad to hear that the content is helpful :D more stuff on the way soon! Thanks for watching

[@ayaz658]

wow thank you so much, I can't thank you enough.

[@perpetuel7118]

Hello Cooper, love the video and have been a subscriber for some time. I am working on a saas product that helps doctors better manage their practice and take care of their patients. I would like add a feature where patients can book appointments on a public website with the doctors for a visit/consultation. Is that something that can be done with google calendar api? Can the doctors see their calendar in my app? I'm currently In the research phase and this video was my starting point 😁

[@ElliotDooleysmith]

Great video.
I haven't heard of Supabase before. Does Supabase handle refresh tokens for Google auth?
I'm working on something that needs constant cal updates without the user having to contest every hour.

[@cheskobeans]

Hello! Thanks for the tutorial, followed it and worked like a charm. I do have one question, when deploying my app with Firebase, after logging in with google I get redirected to localhost after signing in. How can I fix that?

[@afshinmoshrefi]

great tutorial - would be 10x more helpful if you used just React on a standalone server - I'm trying to get my React app to creat events in google calendar - I'm using your video and trying to understand how to do it on a React app running on an Ubuntu server.

[@wc3815]

You deserve more subs and views!!

[@CooperCodes]

I'm getting there :). Thank you for your support!

[@_dvyne]

I really enjoyed this video and the subtle jokes made me sub I immediately 🔥🔥

[@CooperCodes]

Hahaha glad you appreciated the jokes, thanks for watching :)

[@blurabbit6476]

great tutorial, Please do more with the same set of technologies

[@CooperCodes]

Are you interested in seeing functionality for other Google APIs with Supabase? Let me know what you'd like to see :)

[@chris-zlrr]

FINALLY A GOOD VIDEO

[@CooperCodes]

FINALLY A GOOD COMMENT! Hahahaha thanks man appreciate it, this is late but hope it helped.

[@appstuff6565]

Hey thanks for this, im planning to learn using a social media scheduler for instagram. Do ylu have any video or tutorial arouns that? Im invested into nextjs app rotuing with supabase. But im open to learning new tech stack if needed.

[@muhammadhafizibinkamalarif7203]

by creating event can i sent a zoom link also? can it work? like if u tab on that link not just a string.

[@yarapolana]

if you have a different type of login (eg: email and pass) does the Google login override the other login? and does the Google session expire?

[@jairoantoniocamarillo2122]

Excellent video!, you know how make a meet whit the event?

[@chibuzoekwue]

Does the access token change with time like refresh

[@zimin8]

Sincerely thank you for this video i was struggling +sub + like

[@CooperCodes]

Glad it helped. Thank you for watching :)

[@dimasnytin]

Greatly

[@jason.l]

epic tutorial

[@CooperCodes]

epic comment, thanks for watching bro :)

[@blackzero5592]

Hey Cooper Codes! First of all great tutorial..
I am having an issue there. I followed all of your implementation after successful signin I am still having session null? Can you please guide me where I am wrong?

[@codexhimanshu]

i'm having same issue? did you get it resolved now

[@snoussi9004]

I want to integrate the calendar in my app , any idea .

[@DeIgado95]

Awesome

[@CooperCodes]

Thanks for watching :)

[@Hugo76954]

Does anybody know how I could add a Google Meet link to the event?

[@shirabarzel-vinitzky8790]

Thank you very much for the video, it was exactly what I needed. The DateTimePicker did not work for me. I imported it and it still doesn't work, I would appreciate your help. Thanks

[@CooperCodes]

That's a shame to hear the DateTimePicker wasn't working out, there should be similar components that exist that eventually give you that date format that you need for Google Calendar. I'm busy rn but I'd suggest finding a similar React component, and then following a similar process to this video when it comes to handling the date and passing it over to Google Calendar.

[@adammuhammad6802]

Does anyone know whats useSession and useSupabaseClient Substitute in nuxtjs/vuejs?

[@ExplorerOfTheGalaxy]

A dumb question: if I deploy a calendar app to playstore that will probably use too much of my token key..will I be charged? :(

[@cemakdenizcom]

good explanation but I want to know that, can any google user send my own calender a note like a reservation book ? ?if they can not, what is the point of create a react app for send myself a calender note ?

[@CooperCodes]

I believe there is a way to make a public API key so others can add to a certain calendar, but that was not covered here. This video covers the use case of let’s say you had a meeting application, and you wanted everyone logged in with Google to be able to save the meeting to their google calendar. Or a habit tracking app and you want to add daily events to a users calendar.

[@cemakdenizcom]

@@CooperCodes thank you for explain Cooper

[@3ashall]

Me watching 6 months later