Skip to content

Commit

Permalink
Merge pull request #13 from Lambda-School-Labs/firebase-auth
Browse files Browse the repository at this point in the history
Firebase auth
  • Loading branch information
arvagas committed Nov 5, 2019
2 parents 68b1fff + d691944 commit b537e87
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 104 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -14,6 +14,7 @@ node_modules/

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
Expand Down
7 changes: 3 additions & 4 deletions src/components/onboarding/Signin.jsx
@@ -1,8 +1,7 @@
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Swal from 'sweetalert2'
import { signInWithGoogle } from '../../firebase/firebase.utils.js'
import { doFacebookSignIn } from '../../firebase/firebase.utils.js'
import { signInThroughFirebase } from '../../firebase/firebase.utils.js'
import './onboarding-css/Signin.css'

import axios from 'axios'
Expand Down Expand Up @@ -87,10 +86,10 @@ export default class Signin extends Component {
</div>
<div className='right1 flex'>
<div className='test'>
<button onClick={doFacebookSignIn} className='social-signin facebook'>
<button onClick={() => signInThroughFirebase('facebook', this.props.history)} className='social-signin facebook'>
LOG IN WITH FACEBOOK
</button>
<button onClick={signInWithGoogle} className='social-signin google'>
<button onClick={() => signInThroughFirebase('google', this.props.history)} className='social-signin google'>
LOG IN WITH GOOGLE
</button>
</div>
Expand Down
7 changes: 3 additions & 4 deletions src/components/onboarding/Slogin.jsx
Expand Up @@ -2,8 +2,7 @@ import React, { Component } from 'react'
import axios from 'axios'
import Swal from 'sweetalert2'
// import { axiosWithAuth } from '../../routes/axiosWithAuth'
import { signUpWithGoogle } from '../../firebase/firebase.utils.js'
import { doFacebookSignUp } from '../../firebase/firebase.utils.js'
import { signUpThroughFirebase } from '../../firebase/firebase.utils.js'

//import 'bootstrap/dist/css/bootstrap.css'
import './onboarding-css/Slogin.css'
Expand Down Expand Up @@ -112,10 +111,10 @@ export default class Slogin extends Component {

<div className='right flex'>
<div className='test'>
<button onClick={doFacebookSignUp} className='social-signin facebook'>
<button onClick={() => signUpThroughFirebase('facebook', this.props.history)} className='social-signin facebook'>
LOG IN WITH FACEBOOK
</button>
<button onClick={signUpWithGoogle} className='social-signin google'>
<button onClick={() => signUpThroughFirebase('google', this.props.history)} className='social-signin google'>
LOG IN WITH GOOGLE
</button>
</div>
Expand Down
184 changes: 88 additions & 96 deletions src/firebase/firebase.utils.js
@@ -1,106 +1,98 @@
import firebase from "firebase/app"
import 'firebase/auth'
import axios from 'axios'
import firebase from 'firebase/app';
import 'firebase/auth';
import axios from 'axios';

const config = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
}
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

const backend = process.env.REACT_APP_BACKEND_URL
// const backend = 'http://localhost:5000'

firebase.initializeApp(config)
//Initialize firebase authorization with specific config
firebase.initializeApp(config);

export const auth = firebase.auth()
//Create auth shorthand
const auth = firebase.auth();

//Google authentication
export const provider = new firebase.auth.GoogleAuthProvider()
provider.setCustomParameters({ prompt: 'select_account' })
//REGISTER with Google account
export const signUpWithGoogle = () => {
//Use Firebase function to create a popup of specific provider's login
auth.signInWithPopup(provider)
.then(result => {
//If it works, get the idToken from that login for verification use
auth.currentUser.getIdToken(true)
.then(idToken => {
//If it works, send over token to the backend via header
axios.get(`${backend}/auth/firebase/register`, {headers: {"token": idToken}})
.then(res => {
// console.log(res)
// redirect here?
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
}
//LOGIN with Google account
export const signInWithGoogle = () => {
auth.signInWithPopup(provider)
.then(result => {
auth.currentUser.getIdToken(true)
.then(idToken => {
const user = result.user
axios.get(`${backend}/auth/firebase/login`, {headers: {"token": idToken}})
.then(res => {
// console.log(res)
// redirect here?
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
}
//Providers supported
const googleProvider = new firebase.auth.GoogleAuthProvider().setCustomParameters({ prompt: 'select_account' });
const facebookProvider = new firebase.auth.FacebookAuthProvider();

//Facebook authentication
export const facebookProvider = new firebase.auth.FacebookAuthProvider()
//REGISTER with Facebook account
export const doFacebookSignUp = () => {
auth.signInWithPopup(facebookProvider)
.then(result => {
auth.currentUser.getIdToken(true)
.then(idToken => {
const user = result.user
axios.get(`${backend}/auth/firebase/register`, {headers: {"token": idToken}})
.then(res => {
// console.log(res)
// redirect here?
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
}
//LOGIN with Facebook account
export const doFacebookSignIn = () => {
auth.signInWithPopup(facebookProvider)
.then(result => {
auth.currentUser.getIdToken(true)
.then(idToken => {
const user = result.user
axios.get(`${backend}/auth/firebase/login`, {headers: {"token": idToken}})
.then(res => {
// console.log(res)
// redirect here?
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
})
.catch(err => console.log(err))
//Register via Firebase through a specific provider
export const signUpThroughFirebase = (providerChosen, history) => {
//This provider will level up to a named one, pending button clicked
let provider;

//Set up switch statement to allow other types of sign ins down the road
switch(providerChosen) {
case 'google' :
provider = googleProvider;
break;
case 'facebook' :
provider = facebookProvider;
break;
default :
console.log('Provider not supported.');
break;
};

//Use Firebase function to create a popup of specific provider's login
auth.signInWithPopup(provider)
.then(result => {
//If it works, get the idToken from that login for verification use
auth.currentUser.getIdToken(true)
.then(idToken => {
//If it works, send over token to the backend via header
axios.get(`${backend}/auth/firebase/register`, {headers: {"token": idToken}})
.then(res => {
history.push('/stripe')
})
.catch(err => console.log(err));
})
.catch(err => console.log(err));
})
.catch(err => console.log(err));
}

//Github authentication
export const githubProvider = new firebase.auth.GithubAuthProvider()
export const doGithubSignIn = () => auth.signInWithPopup(githubProvider)
//Login via Firebase with a specific provider
export const signInThroughFirebase = (providerChosen, history) => {
//This provider will level up to a named one, pending button clicked
let provider;

//Set up switch statement to allow other types of sign ins down the road
switch(providerChosen) {
case 'google' :
provider = googleProvider;
break;
case 'facebook' :
provider = facebookProvider;
break;
default :
console.log('Provider not supported.');
break;
};

//Use Firebase function to create a popup of specific provider's login
auth.signInWithPopup(provider)
.then(result => {
//If it works, get the idToken from that login for verification use
auth.currentUser.getIdToken(true)
.then(idToken => {
//If it works, send over token to the backend via header
axios.get(`${backend}/auth/firebase/login`, {headers: {"token": idToken}})
.then(res => {
history.push('/hub')
})
.catch(err => console.log(err));
})
.catch(err => console.log(err));
})
.catch(err => console.log(err));
}

0 comments on commit b537e87

Please sign in to comment.