From d2f684f4ede929adcffd6b48d2ec48889f2b038b Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Thu, 5 Dec 2019 19:32:51 -0800 Subject: [PATCH] Login token is retrieved but not stored. --- client/src/App/App.js | 10 +- .../components/sign-in/sign-in.component.jsx | 125 +++++++++--------- client/src/firebase/firebase.utils.js | 1 + client/src/index.js | 5 +- firebase/functions/index.js | 72 +++++++--- 5 files changed, 130 insertions(+), 83 deletions(-) diff --git a/client/src/App/App.js b/client/src/App/App.js index 0903f4d6a..dffa0c323 100644 --- a/client/src/App/App.js +++ b/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" }); } diff --git a/client/src/components/sign-in/sign-in.component.jsx b/client/src/components/sign-in/sign-in.component.jsx index 9d0b11155..4f7fde558 100644 --- a/client/src/components/sign-in/sign-in.component.jsx +++ b/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 ( -
- Sign In -
- - -
- - -
- -
+
+ + {getFieldDecorator("email", { + rules: [ + { + type: "email", + message: "Please enter a valid email." + }, + { + required: true, + message: "Please your email." + } + ] + })()} + + + {getFieldDecorator("password", { + rules: [{ required: true, message: "Please enter your password." }] + })( + } + type="password" + placeholder="Password" + /> + )} + + +
Forgot password
+ + + {errorMessage ? ( + + ) : ( + null + )} + ); } } - -export default SignIn; +export default Form.create({ name: "sign_in" })(SignIn); diff --git a/client/src/firebase/firebase.utils.js b/client/src/firebase/firebase.utils.js index 5cb359f97..6127556a5 100644 --- a/client/src/firebase/firebase.utils.js +++ b/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; diff --git a/client/src/index.js b/client/src/index.js index 613e2cbae..29423deab 100644 --- a/client/src/index.js +++ b/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 } }); diff --git a/firebase/functions/index.js b/firebase/functions/index.js index 0eb914d1d..ffd9747c9 100644 --- a/firebase/functions/index.js +++ b/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); }); -}); +}); \ No newline at end of file