https://github.com/costingh/graphic-design-creator

https://github.com/costingh/graphic-design-creator

Last synced: 22 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/costingh/graphic-design-creator
• Owner: costingh
• Created: 2022-03-10T11:23:32.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-05-05T06:29:35.000Z (over 2 years ago)
• Last Synced: 2023-09-27T07:59:20.798Z (over 1 year ago)
• Language: JavaScript
• Size: 1.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Google Login

Create a react app to login with google account. 

In this tutorial you will:

 - save login data in local storage to remember user login

 - create backend api using node and express to authenticate user

 - publish on heroku and test it on production

## Run it locally

## How to implement

### frontend:

1. npx create-react-app react-google-login

2. npm install react-google-login

3. edit App.js

4. create h1 for app name. 

6. define loginData state hook

7. check loginData and render content

8. if loginData is null render GoogleLogin component

9. if loginData isn't null render you are logged in message. 

10. implement handleLogout

11. implement handleFailure

12. implement handleLogin

## google cloud platform

1. login to google

2. go to https://console.cloud.google.com

3. create a project

4. go to api credential 

5. accept consent screen

6. craete oauth client id

7. craete .env file and save it as REACT_APP_GOOGLE_CLIENT_ID

### backend:

1. create server.js file

2. npm install express dotenv google-auth-library

3. config dotenv

4. create OAuth2Client client 

5. create express server

6. use express.json()

7. define app.post('/api/google-login', ...

8. define app.listen

### heroku publish

1. create Procfile

2. create 

  app.use(express.static

3. app.get('*', 

4. commit changes

5. publish to github

6. create heroku account and app

7. connect it to github repo