How to make a google login system in 5 minutes (updated)
Google Api Usage and Setup Tutorial
A while back I had made a tutorial on how to use the google api. It had recieved a lot of attention and I decided it might be worthwhile to look back at it again and help clear the confusion.
- A google account
- In most cases must be personal
- Cannot be managed by anyone except you
- Application of functions
- Usage of common keywords like "let"
Fluent in HTML
- Know where and how to import a CDN into your project
Step 1: Prepare the API
- Head over to the Google Cloud Platform, and sign in if necessary.
- Click "Create Project"
- Change "Project name" to something suitable with google. Filling out the organization and location is not required, but if you want, go ahead and fill it out.
Create the Project, and then close the tab that you did the first few steps on
Step 2: Get Credentials
- Head over to the Google Cloud Platform again and select your project. On the left hand side, there will be an item called "Credentials". Open it.
- You will see a warning symbol telling you to configure the OAUTH consent screen. MAKE SURE NOT TO CONFIGURE THE ICON OR GOOGLE WILL NEED TO APPROVE THE REQUEST.. You also only need to fill out the first tab.
- Once done, go back to the credentials tab, and near the top you should see a button called Create Credentials. Select OAuth Client ID.
- Assuming this is a website, select web application. If this is a website using only the frontend, the uri origin and authorized redirects should be the same, since it doesn't really matter.
There are 2 specific types of Uri you need to configure for repl.it
(note: both of these urls point at the same website)
Google will give you your client ID, so take note of that
Step 3: The Actual Fun Stuff
In your HTML code, add the following meta and script tags, replacing the content field with your id.
Add the Google Sign In Button:
And woohoo, it now works! If you don't have it working, below are a couple troubleshooting quick techniques. If you don't see it below, leave a comment with images below.
- Make sure the Uri is correct. Look at the instructions above to get help.
- You did not add a custom domain uri, or something that google cannot detect as your website. Easy fix, go to the portal and fix it.
Data is not loading
Duh, you forgot to change the copy pasted code from me, didn't you?