Simple Google Sign-in with Django ✍️ (6 mins)

[@streamocu2929]

best pragmatic programmer, simplicity in code... so good, so beautiful 👍

[@tomdekan]

Thanks a lot 🙂🎉

[@humanbeing33]

It doesnt redirect me it shows this error: Forbidden: /auth-receiver [17/Mar/2024 16:01:28] "POST /auth-receiver HTTP/1.1" 403 0

[@tomdekan]

Thanks for engaging and having a go following the tutorial! 🙂 I’d guess that it’s likely that you haven’t entered your Google API keys correctly, or that you’ve missed a step. I’d suggest retracing your steps and having another go.

[@francosbenitez]

Love your videos man!

[@tomdekan]

Thanks a lot @francosebastianbenitez4505 !

[@alexdin1565]

your videos make Django easy than Html thanks for this content

[@tomdekan]

Glad to hear that Alex 🚀👍

[@Good-and-Geeky]

On your web page you say "Create a folder called templates at core/templates and create a file called sign_in.html in it." The templates folder should be inside the sim folder. Other than that - cool and I got it working..

[@Good-and-Geeky]

Well - Sort of working. I get the google notice to say it is logged in. Even with the added code the user is not in the Django database. I also put in a link to another page which is gated with {% if user.is_authenticated %} which doesn't show up at all. so the log in to my app in not actually working. Any ideas?

[@tomdekan]

Thanks for that Dave. I've just corrected the article 👍

[@tomdekan]

Good that you get the logged in notice: that means that you've been successful. Regarding using the template tag (if user.is_authenticated), that won't work. The reason is that I chose to put the user_data into the session at `request.session['user_data']`. You should be able to access this in your Django template with `request.session.user_data` If you want to use `user.is_authenticated` you can call the Django method authenticate after that (docs.djangoproject.com/en/4.2/topics/auth/default/#how-to-log-a-user-in) Regarding adding the user to the Django database, you'd want to `get_or_create` the user in the post view in the place where I wrote: "I'd also save any new user here to the database. " After you've had another go, feel free to you share your code and I'll look in detail for you (pastebin.com/)

[@streamocu2929]

thank you father 🙏

[@tomdekan]

🚀👍

[@rounak7178]

Thankx Tom loved it. Also help to add the user to database.

[@tomdekan]

Thanks Rounak - glad you liked it 😊

[@PaulRobson-p1y]

Is it possible to implement the auth_receiver without resorting to @csrf_exempt which reduces security?

[@tomdekan]

Cool question. To avoid removing the csrf except is possible but depends on what Google allows. Django generates the csrf token and then Google sends a request to Django. So to keep using that csrf token, you would need to send the csrf token to Google and then have Google also send that csrf token when it sends a request to auth receiver. So check out the Google docs to see what Google allows and let me know. One thing to note: This will add significantly higher complexity beyond the tutorial.

[@sahanaparasuram1948]

Hey this is a great tutorial! I was able to follow along up until the part where we needed to edit the views file. The lines from google.oauth2 import id_token, from google.auth.transport import requests were giving me an error where it said that google.oauth2 and google.auth.transport could not be resolved by pylace. I'm assuming that I need to download these modules or something like that but I'm not able to find the right commands to do this. I'm currently coding on VS code on a mac book. I would really appreciate it if you could help me out :) thank you!

[@sahanaparasuram1948]

Hey! I actually figured out how to fix that issue, thank you! however I'm running into another issue where, when I click the sign in with google button on the sign_up page, it takes me to a blank document - not sure what's going on :(

[@tomdekan]

Thanks Sahana. I've just looked into this today, found the problem, and fixed it. Google now doesn't allow the redirect option in the local dev environment. You'll just need to: 1. Change your HTML code to use "popup" rather than redirect 2. Add the two lines I mention in the settings.py file to allow popups to redirect to Django. 👉 See the full instructions in the updated article: www.photondesigner.com/articles/google-sign-in?ref=yt

[@sahanaparasuram1948]

@@tomdekan Great, thank you so much for looking into this and helping out, really appreciate it!

[@tomdekan]

You’re welcome Sahana. Thanks for your comment

[@salmanmammadli]

it redirects me but there is nothing in that page. It's just white. What should be wrong?

[@enockomondi860]

@@tomdekan same here, did you find a solution @salmanmammadli

[@tomdekan]

​@@enockomondi860 @salmanmammadli Hi both. I've just looked into this today, found the problem, and fixed it. -> Google now doesn't allow the redirect option in the local dev environment. You'll just need to: 1. Change your HTML code to use "popup" rather than redirect 2. Add the two lines I mention in the settings.py file to allow popups to redirect to Django. 👉Check out the full instructions in the updated written guide (updated today): www.photondesigner.com/articles/google-sign-in?ref=yt

[@anzilcutzz3148]

Hi Tom, I like the style of photondesigner's auth page, can you give the code for it ? please

[@tomdekan]

Hi Anzil. I’m not going to post the source online due to the effort required to separate it from Photon Designer. However, feel free to copy the page source from your browser! You should be able to replicate it that way.

[@jonnythrive]

How can you make the google login persist? It loses it right after closing.

[@tomdekan]

Use cookies. Check out the section on that in my written guide in the video's description.

[@rishabhsingh3315]

Hi, Whenever I am trying to login its gives me 403 error (Access to localhost was denied You don't have authorization to view this page.)and then when I refresh it logs me in successfully.

[@tomdekan]

Hi Rishab 🙂 Hmm. That's hard for me to debug effectively as that's a broad error. But I'm always up for a challenge. I'll give my current diagnosis: - It sounds like you've got a problem in your app code, not on Google. - The view returns 403 if you have an incorrect token or invalid client_id Recommendations: 1. Have you set your environment variable (GOOGLE_OAUTH_CLIENT_ID correctly? Add a print statement locally to check it. 2. Add a print statement after `token = request.POST['credential']` so `print(token)`. Then check what you see there on first load, and compare it with what you see after you refresh.

[@danielterrero7956]

In mine everything is working correctly but when i click the button the sign in page is all white and when inspect and go to console it says this "The given origin is not allowed for the given client ID." Really dont know what to do

[@danielterrero7956]

idk if I have to give it time since i just created my credentials or what

[@tomdekan]

Did you select 'redirect' rather than 'popup'? Here's something I added to the video description: ​Edit 2024-07-19: Google now doesn't allow the redirect option in the local dev environment. You'll need to: - Change your HTML code to use "popup" rather than redirect - Add the two lines I mention in the settings.py file to allow popups to redirect to Django. I've updated the written guide so that it now works with a popup 🙂

[@hopesain5065]

So how do i save their credentials in the database? Like after logging in or signing up i should be able to get their email, first name and last name and keep them in the database...

[@tomdekan]

Thanks for your question @hopesain5065 👍 Following your question, I've just updated the written guide to cover this, using code I wrote for Photon Designer today 🙂 Here's the link: www.photondesigner.com/articles/google-sign-in#save-user-to-db

[@tomdekan]

I also mentioned you on the page. Let me know your name if you'd like me to mention you by name 💫

[@hopesain5065]

​@@tomdekanmy name is Hope Sain. Thanks for the guide...

[@tomdekan]

You're welcome@@hopesain5065 . Added your name to the article

[@aryanjain5535]

hey, why pycharm hero?

[@tomdekan]

Pycharm is great!

[@Dominus_ac]

My app was working fine and a few days ago I had this error. I haven't modified anything. m=credential_page_library:50 [GSI_LOGGER]: The given login_uri is not allowed for the given client ID.

[@tomdekan]

Hi Dominus - you were right. I checked the code today and the same thing happened to me I've now fixed it -> we ened to change to using a popup. Google now doesn't allow the redirect option in the local dev environment. You'll just need to: 1. Change your HTML code to use "popup" rather than redirect 2. Add the two lines I mention in the settings.py file to allow popups to redirect to Django. 👉Check out the full instructions in the article (updated today): www.photondesigner.com/articles/google-sign-in?ref=yt

[@ruslangumerov5618]

@@tomdekan Thanks for the tutorial! It did not work on localhost for me until I added both "http:localhost" and "http:localhost:" in the Google API Authorized JS Options/redirect URIs (see stackoverflow.com/questions/68438293/the-given-origin-is-not-allowed-for-the-given-client-id-gsi)

[@Dominus_ac]

Thank you very much man, your videos are very useful :D

[@tomdekan]

Glad you like them! 🙂

[@rprana12777]

Awesome thank you!

[@tomdekan]

You're welcome! 🎉

[@samiulhaq45]

Hi Tom, I follow the same steps as you described in the tutorial but when I click on google button, it redirect me to a blank page of google. could you please explain why? BTW thanks for the video.

[@LtkLucky]

same here

[@tomdekan]

Hmm; I think it's most likely to be your Google auth setup. However, I'll have a look into it.

[@anzilcutzz3148]

@@tomdekan hey tom did you checked it ? im facing the same issue

[@tomdekan]

​ Hi @samiulhaq45, @LtkLucky, ​ and @anzilcutzz3148 . I've just looked into this today, found the problem, and fixed it. -> Google now doesn't allow the redirect option in the local dev environment, but we can use the popup option instead. You'll just need to: 1. Change your HTML code to use "popup" rather than redirect 2. Add the two lines I mention in the settings.py file to allow popups to redirect to Django. 👉Check out the full instructions in the updated written guide (updated today): www.photondesigner.com/articles/google-sign-in?ref=yt

[@tomdekan]

You're welcome. Now fixed! See my reply below.

[@SweetKarly25]

Hello!!! I'm trying to save the users to the database I already copied ur code but still users are not being stored, it would be nice if u can make a video explaining how it works, thanks!

[@tomdekan]

Hi @SweetKarly25 - Thanks for that idea 🙂 The guide doesn't focus on saving users, but I added some sample code on how to do that in the written guide. Search for the section called: "How would I save the user to the database in a production app? 🏭" in www.photondesigner.com/articles/google-sign-in

[@SweetKarly25]

@@tomdekanthanks!! :D

[@tomdekan]

You're very welcome 🙂

[@LtkLucky]

do i need a user model for this>

[@tomdekan]

Eventually yes. In case useful, I included a section on adding a user model in the written article (in the video description)

[@rezhaknightwalker]

button not showing i wonder why

[@tomdekan]

Try checking your google credentials 🙂

[@Miggy97]

Im having the same issue client id is right

[@tomdekan]

Hi both. I've just looked into this today, found the problem, and fixed it. Google now doesn't allow the redirect option in the local dev environment. You'll just need to: 1. Change your HTML code to use "popup" rather than redirect 2. Add the two lines I mention in the settings.py file to allow popups to redirect to Django. 👉Check out the full instructions in the updated article: www.photondesigner.com/articles/google-sign-in?ref=yt

[@pauloandrade3375]

This library is not safe. IT broken (shut down) my application in production. Be aware. After I install it no comande works in terminal anymore. I can't solve it. I trying hard

[@tomdekan]

Hi Paulo. I'm not sure what you meanby "not safe" here. The package that I'm using is the official Google python package - I'm pretty confident that it is safe!

[@Ab-gf8pz]

I am trying to do google login using DRF and react. I am getting this error when trying to login using google - google.auth.exceptions.MalformedError: Wrong number of segments in token: Any idea how to resolve it?

[@tomdekan]

Hi there. It sounds like you're sending an incorrect token from your React app to your DRF app. I'd recommend adding a print statement in your DRF app view and looking at what is in the token. That will give you more information to work with.

[@Ab-gf8pz]

@@tomdekan Hi. I have resolved the error. I was sending access-token instead of id token.

[@tomdekan]

Thanks for the update. Well done for solving it 👍 Glad I was on track.