{"id":15606113,"url":"https://github.com/encoreshao/react-google-login","last_synced_at":"2025-04-27T12:09:54.541Z","repository":{"id":140708803,"uuid":"452236201","full_name":"encoreshao/react-google-login","owner":"encoreshao","description":"An example of handling google authentication with React and NodeJS.","archived":false,"fork":false,"pushed_at":"2023-10-26T00:21:51.000Z","size":456,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T12:09:47.291Z","etag":null,"topics":["bootstrap","express","google-authentication","nodejs","react"],"latest_commit_sha":null,"homepage":"https://react-google-login.herokuapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/encoreshao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-01-26T10:42:44.000Z","updated_at":"2024-12-06T11:12:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"ac4e5e4f-f294-49e6-99b8-4807d08c0f76","html_url":"https://github.com/encoreshao/react-google-login","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoreshao%2Freact-google-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoreshao%2Freact-google-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoreshao%2Freact-google-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoreshao%2Freact-google-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/encoreshao","download_url":"https://codeload.github.com/encoreshao/react-google-login/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251134781,"owners_count":21541384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","express","google-authentication","nodejs","react"],"created_at":"2024-10-03T04:21:12.275Z","updated_at":"2025-04-27T12:09:54.525Z","avatar_url":"https://github.com/encoreshao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Google Login\n\n* Tech: React + Typescript + NodeJS + Express + Google Auth\n\n## Summary\n\nCreate a simple React App to Login with Google Account.\n\n- Save login data in `localStorage` to remember user login\n- Create backend API using `node` and `express` to authenticate user\n- Publish on heroku and test it on Production\n\n### Getting Started\n\n- create an App on Google Cloud Platform\n- using React \u0026 Bootstrap to build Frontend\n- using NodeJS \u0026 Express to build Backend\n- create an Account on Heroku and Publish\n\n#### Google Cloud Platform\n\n- Login to Google\n- Go to https://console.cloud.google.com\n- Create a project \u0026 Configure consent screen\n  - User Type: Extenal\n  - Add `Project Name` and `Developer Contact`\n- Create an `API Credential` with `Oauth Client ID`, selecting `Web Application`\n  - add Authorized JavaScript origins for `Web Application`\n      - http://localhost:3000\n      - https://react-google-login.herokuapp.com/\n- Craete `.env` file and save it as `REACT_APP_CLIENT_ID`\n\n#### Frontend: React \u0026 Bootstrap\n\n- crate a React project with typescript tample\n  ```node\n    npx create-react-app react-google-login --template typescript\n  ```\n- import packages (bootstrap)\n  ```node\n    npm install react-bootstrap bootstrap --save\n  ```\n- edit App.js\n  - use React Bootstrap to build layout\n- define loginData state hook, read data from localStorage\n- check loginData and render content\n  - if loginData is null render `GoogleLogin` component\n  - if loginData isn't null render you are logged in message\n- implement function `handleSuccess`, `handleLogout`, `handleFailure`\n\n#### Backend: NodeJS \u0026 Express\n\n- install packages\n  ```node\n    npm install -save express dotenv google-auth-library\n  ```\n- create `server/index.js` file\n- define `dotenv` and `client` in `server/index.js`\n  ```node\n    const dotenv = require('dotenv');\n    const path = require('path');\n    const { OAuth2Client } = require('google-auth-library');\n  ```\n- config `express` server\n  ```node\n    const express = require('express');\n    ...\n    use express.json()\n    define app.post('/api/google-auth', ...\n    define app.listen\n  ```\n- *need to add `proxy` in `package.json`, it allows FE request to push data into backend\n  ```node\n    \"proxy\": \"http://127.0.0.1:5000/\"\n  ```\n\n#### ENV: .env\n\n```node\nREACT_APP_CLIENT_ID=googleid-uuid.apps.googleusercontent.com\n```\n\n#### Heroku: config and publish\n\n- Create Procfile and add `web: node server/index.js`\n- Add config in backend server\n  ```node\n    app.use(express.static(path.join(__dirname, '..', 'build')));\n    app.get('*', (req, res) =\u003e\n      res.sendFile(path.join(__dirname, '..', 'build', 'index.html'))\n    );\n  ```\n- Publish to Github\n- Create an account on `heroku` and connect it with Github repo\n- Config Vars https://dashboard.heroku.com/apps/{app-name}/settings\n  - key: REACT_APP_CLIENT_ID\n  - value: Google app #{client_id}\n- Manual deploy: Deploy a GitHub branch\n\n#### License\n\nCopyright © 2022-01 Encore Shao. See LICENSE for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencoreshao%2Freact-google-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fencoreshao%2Freact-google-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencoreshao%2Freact-google-login/lists"}