Тёмный
No video :(

Creating Documents using React / Google Docs API / Google OAuth 2.0 

Cooper Codes
Подписаться 13 тыс.
Просмотров 21 тыс.
50% 1

Enjoying my videos? Sign up for more content here: www.coopercode...
📩 Join codeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
Interested in a 1:1 mentorship with me? Jumpstart your career at www.rebrand.ly...
In this video I go over how to create a Google Oauth 2.0 login system in React, creating both login and logout functionality. Then we go in depth on setting up your google developer console to get access to APIs, such as the Google Docs API. Then we create a React frontend that allows us to create Google Docs simply by clicking buttons, these docs also get generated titles that show a class I'm taking in college alongside the date / time. Hope you all enjoyed and make sure to like and subscribe for more content like this :)
Want to support me? Purchase on Amazon with my link here: amzn.to/3Q4h3Pb
Enjoying my content? Feel free to support me on Patreon / coopercodes
Business inquiry? Email thecoopercodes@gmail.com

Опубликовано:

 

6 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@estebanduran6255
@estebanduran6255 2 года назад
Excellent demonstration of Google docs API. You explained the topic in a very concise way without much handholding.
@CooperCodes
@CooperCodes 2 года назад
My goal is to explain the majority of the important details, but also allow people to come to their own understandings and become better developers themselves. Glad to see the tutorial was helpful, thank you for the comment.
@amirnoorani5017
@amirnoorani5017 10 месяцев назад
Thank you Cooper. Your tutorial is the best among 10 other tutorials that I've watched. Only one thing, if someone else login with another Google account, he will access to his own google resources?
@eredluin1
@eredluin1 2 года назад
I get the "has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." when I try to create a file, can someone help?
@managedkaos
@managedkaos 6 месяцев назад
This is just what i needed for a project I'm working on. Thanks!
@miguelcabaero5843
@miguelcabaero5843 3 месяца назад
Thank you so much TwT
@WILLIAMCORREA85
@WILLIAMCORREA85 2 года назад
Wonderful video. Thank you. I have a question: How do I do if I want to upload files to my user's drive account?
@samuelzhu3073
@samuelzhu3073 5 месяцев назад
ur actually goated - easy to follow tutorial 👌
@abdulkareemaldeek8135
@abdulkareemaldeek8135 2 года назад
Awesome! Thank you, I hope to upload more videos about Google API with a more complicated Project.
@cruzorblade
@cruzorblade 2 года назад
Thanks you for the great content. Was really what I was looking for 😃. Please a question: I am currently working on a project with Firebase storage and Firestore. How to do the same with it?
@mdikbalhosen1711
@mdikbalhosen1711 Год назад
How to get all the google docs of users and show in UI and when he click on a doc it will open. How can I do this?
@managedkaos
@managedkaos 6 месяцев назад
Thanks!
@CooperCodes
@CooperCodes 6 месяцев назад
You're welcome! Appreciate the super thanks, and glad the video was helpful for your project. Thank you again :)
@DouglasAlmeida-hp5jk
@DouglasAlmeida-hp5jk Год назад
Is there any way when creating this document in docs to give permissions to another google email?
@amrendrasingh6109
@amrendrasingh6109 Год назад
Thank you so much sir ❤
@lukaakhalbedashvili7167
@lukaakhalbedashvili7167 Год назад
github ref would be great
@sergey7144
@sergey7144 2 года назад
Great video. I have a question. Can we write data to Google Sheet using React? Maybe you can help with it😀
@CooperCodes
@CooperCodes 2 года назад
I'll give a look into this for sure! Maybe a series on multiple google drive related topics / API usage
@ahmadalamin3616
@ahmadalamin3616 2 года назад
hey i was wondering how did you hide the logout button before logging in, and vice versa? could you share the original code please?
@karevenugopal4811
@karevenugopal4811 Год назад
Can u make one video creating Google sheets using reactjs with Google API
@user-om5fk9en5x
@user-om5fk9en5x Год назад
i have added all these scope in the oatuh but it doesnt ask me for those scope
@developeragg
@developeragg Год назад
It doesn't work anymore, any alternative?
@muskansahu4595
@muskansahu4595 8 месяцев назад
Please make a video on document.batchUpdate metod with react (this is also a Google doc api )
@rupertxyz
@rupertxyz 2 года назад
This was an amazing tutorial!
@CooperCodes
@CooperCodes 2 года назад
Thank you for your support! Appreciate it
@surajchaudhary936
@surajchaudhary936 Год назад
may i get the github link of the same code
@developeragg
@developeragg Год назад
It doesn't work anymore, any alternative?
@dreamdivine401
@dreamdivine401 2 года назад
Thank you..learned so much
@CooperCodes
@CooperCodes 2 года назад
Glad it was helpful! Thanks for watching :)
@kartik9892
@kartik9892 2 года назад
Doing it the gapi way is deprecated the new way is google identity service
@developeragg
@developeragg Год назад
It doesn't work anymore, any alternative?
@dadioodude
@dadioodude 2 года назад
Thank you for the great video. Would you know how to add a custom name to a google sheet? I was able to use the fetch command, replacing the link with the one for Sheets, to create new Sheets. However, I was not able to assign new Sheets a custom name using "?title=Custom Name".
@CooperCodes
@CooperCodes 2 года назад
You should be able to pass variables into the body of your request with the Fetch API. I haven't looked into the Sheets API so I am unsure which variables need to be set, so hopefully the Sheets API Docs can provide that. developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options Here is an example of passing in options to a Fetch API call, although a little complicated hopefully this gets you going in the right direction. In the example they set the variable "answer" equal to 42, so in your situation I'd assume it's something more like "title" equal to "This is my custom title here!".
@CooperCodes
@CooperCodes 2 года назад
const data = { title: 'example' }; fetch('', { method: 'POST', // or 'PUT' headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }) .then(response => response.json()) .then(data => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); }); An example further down in the Fetch API docs from above, a bit more simple than the one I linked. developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_json_data
@godswillonyeka5973
@godswillonyeka5973 2 года назад
Nice one
@CooperCodes
@CooperCodes 2 года назад
Thank you kindly, appreciate the support!
@kalidsherefuddin
@kalidsherefuddin 2 года назад
The greatjob
@anshikasethiya5140
@anshikasethiya5140 2 года назад
Getting an error in authorized javascript URI its is showing invalid. It wrote: "loacalhost:3000"
@CooperCodes
@CooperCodes 2 года назад
I think it should be localhost:3000 you may want to double check your spelling
@baxtables
@baxtables Год назад
and also its http not https
@miguelcabaero5843
@miguelcabaero5843 3 месяца назад
Thank you so much TwT
@miguelcabaero5843
@miguelcabaero5843 3 месяца назад
Thank you so much TwT
Далее
Cute kitty gadget 💛💕
00:23
Просмотров 7 млн
НЕДОВОЛЬНА УСЛУГОЙ #shorts
00:27
Просмотров 21 тыс.
Set up Google OAuth with Next.js using Next-Auth!
21:00
Cute kitty gadget 💛💕
00:23
Просмотров 7 млн