Skip to content
Snippets Groups Projects
Commit 1263cb82 authored by Ganapathi Subramanyam Jayam's avatar Ganapathi Subramanyam Jayam :dart:
Browse files

Feat: google signin and github signin 

implemented google and github

fixes #33
parent 9ced2abb
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
digital-course-file/Capture.JPG 0 → 100644
+ 0
− 0
View file @ 1263cb82
digital-course-file/Capture.JPG

24 KiB

digital-course-file/package-lock.json
+ 85
− 0
View file @ 1263cb82
......@@ -11,8 +11,11 @@
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.7.1",
"firebase": "^8.2.9",
"firebaseui": "^4.7.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-github-login-button": "^1.0.1",
"react-google-button": "^0.7.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
......@@ -6934,6 +6937,11 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"node_modules/dialog-polyfill": {
"version": "0.4.10",
"resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
"integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
},
"node_modules/diff-sequences": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
......@@ -8858,6 +8866,18 @@
"node": "^8.13.0 || >=10.10.0"
}
},
"node_modules/firebaseui": {
"version": "4.7.3",
"resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-4.7.3.tgz",
"integrity": "sha512-KKeZQS2fO2SrZFIsEmG6GrTm/+Na8Vk+OM9wnNgP8FtUw6h4S5oCPtebBREr9ETlDFvIK88gaHvp5bvF96yogA==",
"dependencies": {
"dialog-polyfill": "^0.4.7",
"material-design-lite": "^1.2.0"
},
"peerDependencies": {
"firebase": ">=8.2.4"
}
},
"node_modules/flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
......@@ -13290,6 +13310,14 @@
"node": ">=0.10.0"
}
},
"node_modules/material-design-lite": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
"integrity": "sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM=",
"engines": {
"node": ">=0.12.0"
}
},
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......@@ -16524,6 +16552,28 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
"node_modules/react-github-login-button": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-github-login-button/-/react-github-login-button-1.0.1.tgz",
"integrity": "sha512-HXtYwgy8EwR9i+W5HgP1d/Ndf28AXLgc2l7TQwDQfn3Tf6PeS7xD0vqF+xGAfvqKOx6rFWP5E5wpAaoC8wzirw==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-google-button": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/react-google-button/-/react-google-button-0.7.2.tgz",
"integrity": "sha512-LPIqU2hIlc212kqks8MtKjRstquVkP3SIjxlK5B1nIfg2R7YqSusJAxZUkJA5dv/z6QeSuGyI9ujwV/VWMTyAA==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-icons": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
......@@ -27507,6 +27557,11 @@
}
}
},
"dialog-polyfill": {
"version": "0.4.10",
"resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
"integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
},
"diff-sequences": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
......@@ -29015,6 +29070,15 @@
"@firebase/util": "0.3.4"
}
},
"firebaseui": {
"version": "4.7.3",
"resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-4.7.3.tgz",
"integrity": "sha512-KKeZQS2fO2SrZFIsEmG6GrTm/+Na8Vk+OM9wnNgP8FtUw6h4S5oCPtebBREr9ETlDFvIK88gaHvp5bvF96yogA==",
"requires": {
"dialog-polyfill": "^0.4.7",
"material-design-lite": "^1.2.0"
}
},
"flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
......@@ -32380,6 +32444,11 @@
"object-visit": "^1.0.0"
}
},
"material-design-lite": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
"integrity": "sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......@@ -34971,6 +35040,22 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
"react-github-login-button": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-github-login-button/-/react-github-login-button-1.0.1.tgz",
"integrity": "sha512-HXtYwgy8EwR9i+W5HgP1d/Ndf28AXLgc2l7TQwDQfn3Tf6PeS7xD0vqF+xGAfvqKOx6rFWP5E5wpAaoC8wzirw==",
"requires": {
"prop-types": "^15.7.2"
}
},
"react-google-button": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/react-google-button/-/react-google-button-0.7.2.tgz",
"integrity": "sha512-LPIqU2hIlc212kqks8MtKjRstquVkP3SIjxlK5B1nIfg2R7YqSusJAxZUkJA5dv/z6QeSuGyI9ujwV/VWMTyAA==",
"requires": {
"prop-types": "^15.7.2"
}
},
"react-icons": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
digital-course-file/package.json
+ 3
− 0
View file @ 1263cb82
......@@ -7,8 +7,11 @@
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.7.1",
"firebase": "^8.2.9",
"firebaseui": "^4.7.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-github-login-button": "^1.0.1",
"react-google-button": "^0.7.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
......
digital-course-file/src/App.css
+ 5
− 0
View file @ 1263cb82
......@@ -123,3 +123,8 @@ button {
padding: 8px 0;
background: #3a2b58;
}
.Google {
padding-top: 10px;
text-align: center;
}
digital-course-file/src/user/Login.js
+ 57
− 27
View file @ 1263cb82
import React from 'react'
import GoogleButton from 'react-google-button'
import GithubButton from 'react-github-login-button'
const Login = (props) => {
const {
......@@ -12,31 +14,59 @@ const Login = (props) => {
setHasAccount,
emailError,
passwordError,
googlesignin,
githubsignin,
} = props
return (
<section className='login'>
<div className="loginContainer">
<div className='loginContainer'>
<label>UserName</label>
<input type="text" autoFocus required value={email} onChange={(e)=>setEmail(e.target.value)}>
</input>
<p className="errorMsg">{emailError}</p>
<input
type='text'
autoFocus
required
value={email}
onChange={(e) => setEmail(e.target.value)}
></input>
<p className='errorMsg'>{emailError}</p>
<label>Password</label>
<input type="password" required value={password} onChange={(e)=>setPassword(e.target.value)}/>
<p className="errorMsg">{passwordError}</p>
<div className="btnContainer">
<input
type='password'
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<p className='errorMsg'>{passwordError}</p>
<div className='btnContainer'>
{hasAccount ? (
<>
<button onClick={handleLogin}>
Sign In
</button>
<p>Don't have an account ? <span onClick={()=>setHasAccount(!hasAccount)}>Sign up</span></p>
<button onClick={handleLogin}>Sign In</button>
<p>
Don't have an account ?{' '}
<span onClick={() => setHasAccount(!hasAccount)}>Sign up</span>
</p>
<p></p>
<GoogleButton onClick={googlesignin} />
<p></p>
<GithubButton
onClick={githubsignin}
/>
</>
) : (
<>
<button onClick={handleSignup}>
Sign up
</button>
<p>Have an account ? <span onClick={()=>setHasAccount(!hasAccount)}>Sign in</span></p>
<button onClick={handleSignup}>Sign up</button>
<p>
Have an account ?{' '}
<span onClick={() => setHasAccount(!hasAccount)}>Sign in</span>
</p>
<p></p>
<GoogleButton onClick={googlesignin} />
<p></p>
<GithubButton
onClick={githubsignin}
/>
</>
)}
</div>
......
digital-course-file/src/user/Signin.js
+ 77
− 16
View file @ 1263cb82
......@@ -3,6 +3,7 @@ import '../App.css'
import fire from '../fire'
import Login from './Login'
import Hero from './Hero'
import firebase from 'firebase'
const Signin = () => {
const [user, setUser] = useState('')
......@@ -12,6 +13,64 @@ const Signin = () => {
const [passwordError, setPasswordError] = useState('')
const [hasAccount, setHasAccount] = useState(false)
const githubsignin = () => {
var provider = new firebase.auth.GithubAuthProvider()
firebase
.auth()
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential
// This gives you a GitHub Access Token. You can use it to access the GitHub API.
var token = credential.accessToken
// The signed-in user info.
setUser(result.user)
// ...
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code
var errorMessage = error.message
// The email of the user's account used.
var email = error.email
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential
setEmailError(error.message)
// ...
})
}
const googlesignin = () => {
clearErrors()
var provider = new firebase.auth.GoogleAuthProvider()
firebase
.auth()
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential
// This gives you a Google Access Token. You can use it to access the Google API.
var token = credential.accessToken
// The signed-in user info.
setUser(result.user)
// ...
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code
var errorMessage = error.message
// The email of the user's account used.
var email = error.email
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential
setEmailError(error.message)
// ...
})
}
const clearInputs = () => {
setEmail('')
setPassword('')
......@@ -94,6 +153,8 @@ const Signin = () => {
setHasAccount={setHasAccount}
emailError={emailError}
passwordError={passwordError}
googlesignin={googlesignin}
githubsignin={githubsignin}
/>
)}
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment