Permalink
Browse files

Step 17: sign users up and log them in/out with Firebase

  • Loading branch information...
samanthamichele7 committed Jun 1, 2017
1 parent 84569a0 commit 82d4f6adc697d1606f2f663e2de912a11a230c7c
Showing with 128 additions and 20 deletions.
  1. +2 −0 package.json
  2. +71 −10 src/actions/index.js
  3. +17 −1 src/containers/Login.js
  4. +18 −2 src/containers/Signup.js
  5. +15 −5 src/reducers/auth.js
  6. +5 −2 src/store/configureStore.js
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^4.1.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-modal": "^1.7.7",
@@ -12,6 +13,7 @@
"redux": "^3.6.0",
"redux-form": "^6.7.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"superagent": "^3.5.2"
},
"devDependencies": {
@@ -1,20 +1,32 @@
import request from 'superagent';
import Firebase from 'firebase';

export const OPEN_MODAL = 'OPEN_MODAL';
export const CLOSE_MODAL = 'CLOSE_MODAL';
export const REQUEST_GIFS = 'REQUEST_GIFS';
export const SIGN_IN_USER = 'SIGN_IN_USER';
export const SIGN_OUT_USER = 'SIGN_OUT_USER';
export const AUTH_ERROR = 'AUTH_ERROR';
export const AUTH_USER = 'AUTH_USER';

const API_URL = 'http://api.giphy.com/v1/gifs/search?q=';
const API_KEY = '&api_key=dc6zaTOxFJmzC';

export function requestGifs(term = null) {
const data = request.get(`${API_URL}${term.replace(/\s/g, '+')}${API_KEY}`);
const config = {
apiKey: "",
authDomain: "",
databaseURL: "",
};

return {
type: REQUEST_GIFS,
payload: data
Firebase.initializeApp(config);

export function requestGifs(term = null) {
return function(dispatch) {
request.get(`${API_URL}${term.replace(/\s/g, '+')}${API_KEY}`).then(response => {
dispatch({
type: REQUEST_GIFS,
payload: response
});
});
}
}

@@ -31,15 +43,64 @@ export function closeModal() {
}
}

export function signInUser() {
return {
type: SIGN_IN_USER
export function signUpUser(credentials) {
return function(dispatch) {
Firebase.auth().createUserWithEmailAndPassword(credentials.email, credentials.password)
.then(response => {
dispatch(authUser());
})
.catch(error => {
console.log(error);
dispatch(authError(error));
});
}
}

export function signInUser(credentials) {
return function(dispatch) {
Firebase.auth().signInWithEmailAndPassword(credentials.email, credentials.password)
.then(response => {
dispatch(authUser());
})
.catch(error => {
dispatch(authError(error));
});
}
}

export function signOutUser() {
return function (dispatch) {
Firebase.auth().signOut()
.then(() =>{
dispatch({
type: SIGN_OUT_USER
})
});
}
}


export function verifyAuth() {
return function (dispatch) {
Firebase.auth().onAuthStateChanged(user => {
if (user) {
dispatch(authUser());
} else {
dispatch(signOutUser());
}
});
}
}

export function authUser() {
return {
type: AUTH_USER
}
}

export function authError(error) {
return {
type: SIGN_OUT_USER
type: AUTH_ERROR,
payload: error
}
}
@@ -34,11 +34,21 @@ class Login extends React.Component {
</fieldset>
);

renderAuthenticationError() {
if (this.props.authenticationError) {
return <div className="alert alert-danger">{ this.props.authenticationError }</div>;
}
return <div></div>;
}

render() {
return(
<div className="container">
<div className="col-md-6 col-md-offset-3">
<h2 className="text-center">Log In</h2>

{ this.renderAuthenticationError() }

<form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
<Field name="email" component={this.renderField} className="form-control" type="text" label="Email"/>
<Field name="password" component={this.renderField} className="form-control" type="password" label="Password"/>
@@ -51,7 +61,13 @@ class Login extends React.Component {
}
}

export default connect(null, Actions)(reduxForm({
function mapStateToProps(state) {
return {
authenticationError: state.auth.error
}
}

export default connect(mapStateToProps, Actions)(reduxForm({
form: 'login',
validate
})(Login));
@@ -29,7 +29,7 @@ const validate = values => {

class Signup extends React.Component {
handleFormSubmit = (values) => {
this.props.signInUser(values);
this.props.signUpUser(values);
};

renderField = ({ input, label, type, meta: { touched, error } }) => (
@@ -42,11 +42,21 @@ class Signup extends React.Component {
</fieldset>
);

renderAuthenticationError() {
if (this.props.authenticationError) {
return <div className="alert alert-danger">{ this.props.authenticationError }</div>;
}
return <div></div>;
}

render() {
return (
<div className="container">
<div className="col-md-6 col-md-offset-3">
<h2 className="text-center">Sign Up</h2>

{ this.renderAuthenticationError() }

<form onSubmit={this.props.handleSubmit(this.handleFormSubmit)}>
<Field name="email" type="text" component={this.renderField} label="Email" />
<Field name="password" type="password" component={this.renderField} label="Password" />
@@ -60,7 +70,13 @@ class Signup extends React.Component {
}
}

export default connect(null, Actions)(reduxForm({
function mapStateToProps(state) {
return {
authenticationError: state.auth.error
}
}

export default connect(mapStateToProps, Actions)(reduxForm({
form: 'signup',
validate
})(Signup));
@@ -1,18 +1,28 @@
import { SIGN_IN_USER, SIGN_OUT_USER } from '../actions';
import { AUTH_USER, SIGN_OUT_USER, AUTH_ERROR } from '../actions';

const initialState = {
authenticated: false
authenticated: false,
error: null
};

export default function gifs(state = initialState, action) {
switch (action.type) {
case SIGN_IN_USER:
case AUTH_USER:
return {
...state, authenticated: true
...state,
authenticated: true,
error: null
};
case SIGN_OUT_USER:
return {
...state, authenticated: false
...state,
authenticated: false,
error: null
};
case AUTH_ERROR:
return {
...state,
error: action.payload.message
};
default:
return state;
@@ -1,8 +1,9 @@
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import reduxThunk from 'redux-thunk';
import rootReducer from '../reducers';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';
import * as Actions from '../actions';

export const history = createHistory();

@@ -11,7 +12,7 @@ export function configureStore(initialState) {
rootReducer,
initialState,
compose (
applyMiddleware(ReduxPromise, routerMiddleware(history)),
applyMiddleware(reduxThunk, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
@@ -24,5 +25,7 @@ export function configureStore(initialState) {
});
}

store.dispatch(Actions.verifyAuth());

return store;
}

0 comments on commit 82d4f6a

Please sign in to comment.