Adding Sign-In for Authorized Users

README.md

@@ -137,4 +137,5 @@ Dependency Installation: **`npm i --save redux-thunk`**
 
 1. Adding an `<Auth />` Container Form: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/48acdef930355784a90ba1487187663e2055a487)
 2. Adding **`ACTION Creators`** for the Auth Form: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/0a75199f9f50f0ba10fa05489739b6541152f27c)
-3. Getting a Token from the Backend for Sign-up: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/57771e243efe0719b86938a041656073b30a69d4)
+3. Getting a Token from the Backend for Sign-Up: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/57771e243efe0719b86938a041656073b30a69d4)
+4. Adding Sign-In for Authorized Users: [Commit Details]()

src/containers/Auth/Auth.component.jsx

@@ -42,6 +42,7 @@ class Auth extends Component {
         touched: false,
       },
     },
+    isSignUp: true,
   };
 
   checkValidity = (value, rules) => {
@@ -67,9 +68,11 @@ class Auth extends Component {
 
   submitHandler = event => {
     event.preventDefault();
-    this.props.onAuth(this.state.controls.email.value, this.state.controls.password.value);
+    this.props.onAuth(this.state.controls.email.value, this.state.controls.password.value, this.state.isSignUp);
   };
 
+  switchAuthModeHandler = () => this.setState(prevState => ({ isSignUp: !prevState.isSignUp }));
+
   render() {
     const formElementsArray = [];
     for (let key in this.state.controls)
@@ -94,16 +97,22 @@ class Auth extends Component {
     return (
       <FormDiv>
         <form onSubmit={this.submitHandler}>
+          <h3>{this.state.isSignUp ? "Sign-Up" : "Sign-In"}</h3>
           {form}
           <Button type="success">SUBMIT</Button>
         </form>
+        <Button
+          type="danger"
+          onClick={this.switchAuthModeHandler}>
+          {this.state.isSignUp ? "Existing User? Sign-In" : "New User? Sign-Up"}
+        </Button>
       </FormDiv>
     );
   }
 };
 
 const mapDispatchToProps = dispatch => ({
-  onAuth: (email, pass) => dispatch(actions.auth(email, pass)),
+  onAuth: (email, pass, isSignup) => dispatch(actions.auth(email, pass, isSignup)),
 });
 
 export default connect(null, mapDispatchToProps)(Auth);

src/store/actions/auth.js

@@ -20,22 +20,31 @@ export const authFail = error => {
   };
 };
 
-export const auth = (email, password) => dispatch => {
+export const auth = (email, password, isSignup) => dispatch => {
   dispatch(authStart());
   const authData = {
     email,
     password,
     returnSecureToken: true,
   };
+
+  // API Key
+  const API_KEY = "AIzaSyBCsIqRpXyn4Y3eYRikUd9uhe71UOq-NMA";
+
+  // Sign-In Link: https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]
+  const signIn = "signInWithPassword", signUp = "signUp";
+  let url = isSignup ? `https://identitytoolkit.googleapis.com/v1/accounts:${signUp}?key=${API_KEY}`
+    : `https://identitytoolkit.googleapis.com/v1/accounts:${signIn}?key=${API_KEY}`;
+
   axios
-    .post('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyBCsIqRpXyn4Y3eYRikUd9uhe71UOq-NMA', authData)
-    .then(res => {
+    .post(url, authData)
+    .then((res) => {
       console.log(res);
       dispatch(authSuccess(res.data));
       return res;
     })
-    .catch(err => {
+    .catch((err) => {
       console.log(err);
       dispatch(authFail(err));
     });
-}
+};