Setup Google OAuth sign in 6 minutes

Learn how to add google sign in into your website with Appwrite.
Article: www.appwrite.i...
Instructor: / dennisivy11 / / dennis-ivanov
💬 Follow Appwrite on social media & join our Discord community.
• Twitter: / appwrite
• Discord: appwrite.io/di...
• LinkedIn: / appwrite

[@jlambert12013]

Finally, a tutorial that's to the point!

[@gamingarea9011]

Now that's what i wanted. Can you also make Facebook login

[@alexander499zero]

Facebook is useless

[@WilliamCunningham-v3o]

This was very helpful and enabled me to configure some internal apps using OAUTH successfully. Thanks!

[@Appwrite]

Glad it helped!! - Dennis Ivy

[@BeastRacid]

That tutorial doesn't explain too much for someone, who is not familiar with this exact web project. It would be better to show the whole process of implementing all of these functions, buttons and SDK libs from the very beginning of the website project existence - that is, onto plain index.html with no content included before the tutorial walk-through was recorded. It is more of an example of a ready project, with its own very specific concept of how the website and login screen should look like. Not showing the whole project idea within the video causes a few difficulties in understanding. For instance: *where* is the script responsible for triggering the handleLogin() function? I assume it's the event listener on that button, but that is not shown on the video. I had to guess it myself. There is also the following function handling logging out, which was displayed for a few seconds on the video and not mentioned completely. Poor explanation of the logging in/out concept. And I think it would be nice to add "with AppWrite" to the title of the video, because I found it looking for plain and simple explanation of Google OAuth in JavaScript. I didn't ask for 3rd party products and solutions.

[@Appwrite]

You can reference the source code for the project in the attached repo. This example uses "Sign in with Apple," but the core concepts are the same. All you need to do is change the OAuthProvider: github.com/divanov11/apple-signin - Dennis Ivy

[@harshdeep7015]

Is it now possible for react native apps🤔

[@Appwrite]

You could use the the web SDK with react native, although we are working on finalizing a react native SDK at the moment. - Dennis Ivy

[@harshdeep7015]

@@Appwrite thank you very much for react native sdk

[@klaussiebeneicher5418]

Would really help, the alternative via web sdk is a mess to set up correctly.

[@trikooCreates]

thanks for the content, can you please tell me what do you use to record such smooth mouse movements?

[@eestiprogrammeerimine1035]

Could you put the code in the description please? I seem to have it not work properly

[@alexander499zero]

Yes please😅😊❤

[@leoprangstobing7469]

you need to add eventlistener click to both login and logout button

[@akrahman2491]

Getting this error appwriteexception: user (role: guests) missing…

[@Appwrite]

That happens when you first try to get a user when your not authenticated. Once you login the error goes away, so there’s nothing to worry about.

[@akrahman2491]

@@Appwrite after I logged in, it remains the same, what should I do

[@Appwrite]

@akrahman2491 even when you refresh the page?

[@akrahman2491]

Yes, after create an account, I again crate a session, still got the error

[@Appwrite]

Can you please join the appwrite discord server and open up and issue tagging me (Dennis Ivy)? And explain the tech you are using with some code so I can see. In the issue mention that I said to tag me

[@bet_5982]

was refresh token handling fixed? it was supposed to be stored in first log in

[@Imam_Faheem_khan]

to the point and quick! i like it

[@hieuwhitehat8254]

How to get some user information, for the purpose of displaying it on the interface, for example, the home page displays HELLO "name user"? . Thanks !

[@BusinessAutomatedTutorials]

Thank you! That was very helpful! By the way what is the app you use for screen recording?

[@Appwrite]

My pleasure 👊 And I use screen studio - Dennis Ivy

[@BusinessAutomatedTutorials]

@@Appwrite Thank you! Gosh it is Mac only 😂😂 more and more I tempted to switch to Mac, but would miss having ubuntu shell in WSL and likely some of the apps. Thanks!

[@marcioheleno]

Thank you help me a lot.

[@oblivion.4190]

Thanks a lot !

[@nikhilkhanwani4659]

Will it work with android?

[@teacher4life775]

Where he chose web application you would select android

[@alexander499zero]

When you choose web app it will work in any browser

[@klopmarch]

Bro what's that VSC theme

[@Ze_Chevalier]

Google cloud says I have a 90 day trial, after that expires will I need to pay to keep the OAuth login on my website?

[@Appwrite]

Short answer: Google OAuth2 is free and will always remain free. Long answer: When you first create a Google Cloud account, you have a 90-day trial for all Google Cloud services. This includes Cloud Storage,, Maps, BigQuery, etc. Some of these services have a limit before you have to pay, so after the 90-day trial, when you cross the free tier, you will be charged. Google OAuth2 is one of the services included in the free tier with no limits, so you don't have to worry about exceeding a limit. - Dennis Ivy.

[@Ze_Chevalier]

@Appwrite Thanks!

[@dwisetyoaji5007]

still waiting for 1.5 in cloud, not supported yet? I test this afternoon still throw error

[@nitinkumarme]

I have also been waiting for Appwrite Cloud 1.5 for a long time.

[@Appwrite]

1.5 on Cloud is expected very soon! @@nitinkumarme

[@Appwrite]

1.5 on Cloud is expected very soon!

[@devXarts_yt]

Hey Great video. Also i have a question. Is it possible to use google authenticator code login to our websites ? If yes then how ?

[@antonmevan]

Can you show us how to create master token?

[@Akashic_Monk]

i got lost at 5:00 where do i access or open that code to do that part i got all the way to there then dont know where to go u just opened new thing without showing ?

[@ZyrusAlvez]

it must be ur own code, bruh. he just show how to pur the code into ur code

[@sandovalvaz6093]

Hi, do you know why this error occur? "OAuth 2 parameters can only have a single value: scope"

[@fastgaming708]

can you help me

[@mattxruiz]

remove oauth scopes, save, and then go back in and readd your scopes

[@ZeelDadhaniya]

if i am using google as provider and login with google than how can I get user detail like profile picture of user and all ?

[@abisarwan20]

hey, i have a question please, is it free without limit of registered user ?

[@sowjanyarbhat4715]

Is there a way to pass prompt parameter ? So that each time user is asked before logging in ?

[@Appwrite]

Are you referring to turning off prompt notifications on the user's end?

[@YuvanthVeluru-l9i]

Is the code same for react native?Or does it change for the app?

[@freekeys]

How can we make our own backend for OAuth?

[@christoff124]

its not hard

[@matinodoom5883]

does this work on mobile - react native expo?

[@FernandoGutierrez-gz5hk]

How do I do it with Microsoft?

[@arieljordz]

Is it possible to bypass the allow consent since I already allowed it in my first login?

[@maxponmar]

I have a problem trying to setup Google auth, I have my appwrite instance running on the port 444, and when I try to do login the redirect url doesn't contain the port, giving me the Error 400: redirect_uri_mismatch. Has anyone had this problem? (I set the url correctly with the port in the client app and in the redirect url setting from Google)

[@jovianswank300]

This is super helpful but considering Android why don't u integrate google sign in api instead of redirect to the browser?

[@Appwrite]

Glad it helped. I'll need to look into the Android solutions and discuss this with the team - Dennis Ivy

[@RushikeshGangapurkar]

is this works for react native as well??

[@alexander499zero]

Yee probably

[@Haroombe]

what do you use for your webcam ?

[@Appwrite]

Logitech 4K Pro Webcam

[@alexander499zero]

Squircle in OBS

[@xeno_dz]

vs code theme ?

[@MoneyShifted]

appwrite don't allow a bypass of installed applications like mobile apps? App write asking to app secret but google don't provide it for Secuity reasons. does this mean i can't have google sign in on my app?

[@freekeys]

Can you make video: Expo react native + Social auth. With server please 🙏

[@MuhammadAmin-q2e]

I create it and client secret invisible then i remove it and created it again but same issue?

[@Appwrite]

Can you ask this question in the Appwrite discord server and provide more details to what you're doing/facing? Link to discord is in the video description. Team is very responsive there :)

[@AweSomePeoPle-CH]

i was introduced to Appwrite by this video yet this video isn't explaining how to set up Appwrite 😒

[@Appwrite]

There are several getting started videos on the channel now to setup an appwrite project, especially with the web SDK. Please review those

[@thangphan5177]

Helpful, tks u!

[@Appwrite]

:)

[@Leon-eh7im]

he is dennis

[@Appwrite]

👋

[@mustafaozarslan8448]

Thanks man

[@Appwrite]

:)

[@CODEEZILLA]

What app you use for this video (screen recorder)?

[@Appwrite]

Screen studio for screen, OBS for headshots. - Dennis Ivy

[@CODEEZILLA]

@@Appwrite thank you very much!

[@alexander499zero]

OBS

[@shambelhagos472]

how can I get the domain

[@Appwrite]

Are you referring to the callback URL? You can find this at 4:03 in the video - Dennis Ivy

[@kilokiloj]

defining oath might be useful.

[@besufkaddebebe]

What is the redirect url?

[@Appwrite]

This is where the user will be sent once a user signs in with google, so it completes the sign in process on Appwrites end and generates a session for you. Remember, you Authenticate with google, but you sign in with appwrite, or whatever platform/custom build you are using. - Dennis Ivy

[@Ryan-kx6qw]

Do you have the source code of this tutorial?

[@Appwrite]

Not yet, I'll need to link it up - Dennis Ivy

[@aparmitsrivastava3699]

can i get the code for this ? please someone help

[@Appwrite]

I created a branch from the Apple OAuth example that you can find here: github.com/divanov11/apple-signin/tree/google-signin

[@ryansamte8874]

could you make for react native

[@Appwrite]

Noted

[@pishnahadebehtar]

❤‍🔥❤‍🔥❤‍🔥

[@charindubandaranayake7888]

thanks

[@abdallah_eldars]

it's 7 minutes

[@chauquang55]

why you do oath facebook

[@Appwrite]

Sorry, not understanding the question. We have a facebook OAuth option - Dennis Ivy

[@chauquang55]

@@Appwrite I mean, can you make a clip about Facebook oauth sign in?

[@Appwrite]

@chauquang55 ah got it. I can definitely look into that :) - Dennis Ivy

[@chauquang55]

@@Appwrite thank you

[@swetapandey5725]

I have not used his code ...but i am getting error like cannot get /auth/google Can anyone tell me any possible reason for this issue .

[@EmmanuelBouillon0]

Merci

[@Appwrite]

😉

[@NativeCoding-s1e]

Repo is required man. otherwise its useless

[@Appwrite]

Noted

[@daianaarguello9881]

0:33

[@daianaarguello9881]

0:33 0:33