Login token is retrieved but not stored.

client/src/App/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import "./App.css";
 
 import { auth, createUserProfileDocument } from "../firebase/firebase.utils";
-import { gql } from "apollo-boost";
+// import { gql } from "apollo-boost";
 
 import firebase from "../firebase/firebase.utils"
 
@@ -27,16 +27,15 @@ class App extends React.Component {
   componentDidMount() {
     const { setCurrentUser } = this.props;
     this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
-      console.log("userAuth", userAuth);
       if (userAuth) {
         const token = await userAuth.getIdToken();
-        console.log("token", token);
+        console.log("User auth token", token);
         const idTokenResult = await userAuth.getIdTokenResult();
         const hasuraClaim =
           idTokenResult.claims["https://hasura.io/jwt/claims"];
 
         if (hasuraClaim) {
-          console.log("status should be in");
+          console.log("status should be in1", hasuraClaim);
           //setAuthState({ status: "in", user, token });
         } else {
           // Check if refresh is required.
@@ -48,10 +47,11 @@ class App extends React.Component {
             // Force refresh to pick up the latest custom claims changes.
             const token = await userAuth.getIdToken(true);
             //setAuthState({ status: "in", user, token });
-            console.log("status should be in");
+            console.log("status should be in2");
           });
         }
       } else {
+        console.log("else statement.")
         //setAuthState({ status: "out" });
       }
 

client/src/components/sign-in/sign-in.component.jsx

@@ -1,76 +1,77 @@
 import React from "react";
-
-import FormInput from "../form-input/form-input.component";
-import CustomButton from "../custom-button/custom-button.component";
-
-import { auth, signInWithGoogle } from "../../firebase/firebase.utils";
-
-//Styling imports
-import { Typography } from "antd";
-import { Input } from "antd";
-import { Button } from "antd";
+import { auth } from "../../firebase/firebase.utils";
+import { Form, Icon, Input, Button, Alert } from "antd";
 
 class SignIn extends React.Component {
-  constructor(props) {
-    super(props);
-
+  constructor() {
+    super();
     this.state = {
-      email: "",
-      password: ""
+      errorMessage: null
     };
   }
 
-  handleSubmit = async event => {
-    event.preventDefault();
-
-    const { email, password } = this.state;
-
-    try {
-      await auth.signInWithEmailAndPassword(email, password);
-      this.setState({ email: "", password: "" });
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  handleChange = event => {
-    const { value, name } = event.target;
-
-    this.setState({ [name]: value });
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields(async (err, values) => {
+      if (!err) {
+        const { email, password } = values;
+        try {
+          await auth.signInWithEmailAndPassword(email, password);
+          this.props.form.resetFields();
+        } catch (error) {
+          this.setState({ ...this.state, errorMessage: error.message });
+        }
+      }
+    });
   };
 
   render() {
+    const { getFieldDecorator } = this.props.form;
+    const { errorMessage } = this.state;
     return (
-      <div className="sign-in">
-        <Typography.Title>Sign In</Typography.Title>
-        <form onSubmit={this.handleSubmit}>
-          <Input
-            placeholder="Email"
-            name="Email"
-            type="email"
-            handleChange={this.handleChange}
-            value={this.state.email}
-            label="email"
-            required
-          />
-          <Input.Password
-            name="password"
-            type="password"
-            value={this.state.password}
-            handleChange={this.handleChange}
-            label="password"
-            required
-          />
-          <div className="buttons">
-            <Button type="submit"> Sign in </Button>
-            <Button onClick={signInWithGoogle}>
-              Sign in with Google
-            </Button>
-          </div>
-        </form>
-      </div>
+      <Form onSubmit={this.handleSubmit} className="login-form">
+        <Form.Item label="E-mail">
+          {getFieldDecorator("email", {
+            rules: [
+              {
+                type: "email",
+                message: "Please enter a valid email."
+              },
+              {
+                required: true,
+                message: "Please your email."
+              }
+            ]
+          })(<Input />)}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator("password", {
+            rules: [{ required: true, message: "Please enter your password." }]
+          })(
+            <Input
+              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
+              type="password"
+              placeholder="Password"
+            />
+          )}
+        </Form.Item>
+        <Form.Item>
+          <div className="login-form-forgot">Forgot password</div>
+          <Button
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            Log in
+          </Button>
+        </Form.Item>
+        {errorMessage ? (
+          <Alert message={errorMessage} type="error" />
+        ) : (
+          null
+        )}
+      </Form>
     );
   }
 }
-
-export default SignIn;
+export default Form.create({ name: "sign_in" })(SignIn);

client/src/firebase/firebase.utils.js

@@ -16,6 +16,7 @@ const config = {
 firebase.initializeApp(config);
 
 export const createUserProfileDocument = async (userAuth, additionalData) => {
+  //Needs to be redone to write to GQL database. 
   console.log("userAuth from firebase Utils", userAuth);
   if (!userAuth) return;
 

client/src/index.js

@@ -29,7 +29,10 @@ const client = new ApolloClient({
 
 client.writeData({
   data: {
-    currentUser: null
+    currentSelectedNavItem: null,
+    currentUser: null,
+    authState: null,
+    gqlToken: null
   }
 });
 

firebase/functions/index.js

@@ -5,31 +5,73 @@
 //  response.send("Hello from Firebase!");
 // });
 
-const functions = require("firebase-functions");
-const admin = require("firebase-admin");
+// const functions = require("firebase-functions");
+// const admin = require("firebase-admin");
+// admin.initializeApp(functions.config().firebase);
+
+// // On sign up.
+// exports.processSignUp = functions.auth.user().onCreate(user => {
+//   const customClaims = {
+//     "https://hasura.io/jwt/claims": {
+//       "x-hasura-default-role": "user",
+//       "x-hasura-allowed-roles": ["user"],
+//       "x-hasura-user-id": user.uid
+//     }
+//   };
+
+//   return admin
+//     .auth()
+//     .setCustomUserClaims(user.uid, customClaims)
+//     .then(() => {
+//       // Update real-time database to notify client to force refresh.
+//       const metadataRef = admin.database().ref("metadata/" + user.uid);
+//       // Set the refresh time to the current UTC timestamp.
+//       // This will be captured on the client to force a token refresh.
+//       return metadataRef.set({ refreshTime: new Date().getTime() });
+//     })
+//     .catch(error => {
+//       console.log(error);
+//     });
+// });
+
+const functions = require('firebase-functions');
+const admin = require('firebase-admin');
 admin.initializeApp(functions.config().firebase);
 
 // On sign up.
 exports.processSignUp = functions.auth.user().onCreate(user => {
-  const customClaims = {
-    "https://hasura.io/jwt/claims": {
-      "x-hasura-default-role": "user",
-      "x-hasura-allowed-roles": ["user"],
-      "x-hasura-user-id": user.uid
-    }
-  };
-
-  return admin
-    .auth()
-    .setCustomUserClaims(user.uid, customClaims)
+  console.log(user);
+  // Check if user meets role criteria:
+  // Your custom logic here: to decide what roles and other `x-hasura-*` should the user get
+  let customClaims;
+  if (user.email && user.email.indexOf('@thinkimex.com') !== -1) {
+    customClaims = {
+      'https://hasura.io/jwt/claims': {
+        'x-hasura-default-role': 'admin',
+        'x-hasura-allowed-roles': ['user', 'admin'],
+        'x-hasura-user-id': user.uid
+      }
+    };
+  }
+  else {
+    customClaims = {
+      'https://hasura.io/jwt/claims': {
+        'x-hasura-default-role': 'user',
+        'x-hasura-allowed-roles': ['user'],
+        'x-hasura-user-id': user.uid
+      }
+    };
+  }
+  // Set custom user claims on this newly created user.
+  return admin.auth().setCustomUserClaims(user.uid, customClaims)
     .then(() => {
       // Update real-time database to notify client to force refresh.
       const metadataRef = admin.database().ref("metadata/" + user.uid);
       // Set the refresh time to the current UTC timestamp.
       // This will be captured on the client to force a token refresh.
-      return metadataRef.set({ refreshTime: new Date().getTime() });
+      return metadataRef.set({refreshTime: new Date().getTime()});
     })
     .catch(error => {
       console.log(error);
     });
-});
+});