In progress changes for ensuring that new clients are written to the database.

This commit is contained in:
Patrick Fic
2019-12-10 18:43:46 -08:00
parent 88857800e6
commit 0cb9065dba
11 changed files with 97 additions and 91 deletions

View File

@@ -1,78 +0,0 @@
//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
import React, { useState, useEffect } from "react";
import firebase from "../firebase/firebase.utils";
import App from "./App";
import { gql } from "apollo-boost";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import Spin from "../components/loading-spinner/loading-spinner.component";
const UPSERT_USER = gql`
mutation upsert_user($authEmail: String!, $authToken: String!) {
insert_users(
objects: [{ email: $authEmail, authid: $authToken }]
on_conflict: { constraint: users_pkey, update_columns: [authid] }
) {
returning {
authid
}
}
}
`;
export default function Auth() {
const [authState, setAuthState] = useState({ status: "loading" });
useEffect(() => {
return firebase.auth().onAuthStateChanged(async user => {
if (user) {
console.log("Current User:", user);
client
.mutate({
mutation: UPSERT_USER,
variables: { authEmail: user.email, authToken: user.uid }
})
.then(r => console.log("Successful Upsert", r))
.catch(error => console.log("Upsert error!!!!", error));
const token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) {
setAuthState({ status: "in", user, token });
} else {
// Check if refresh is required.
const metadataRef = firebase
.database()
.ref("metadata/" + user.uid + "/refreshTime");
metadataRef.on("value", async () => {
// Force refresh to pick up the latest custom claims changes.
const token = await user.getIdToken(true);
setAuthState({ status: "in", user, token });
});
}
} else {
setAuthState({ status: "out" });
}
});
}, []);
let content;
if (authState.status === "loading") {
content = <Spin />;
} else {
content = (
<>
<App authState={authState} />
</>
);
}
return <div className="app-container">{content}</div>;
}

View File

@@ -22,13 +22,6 @@ class App extends React.Component {
this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => { this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
console.log("Current User:", user); console.log("Current User:", user);
if (user) { if (user) {
// client
// .mutate({
// mutation: UPSERT_USER,
// variables: { authEmail: user.email, authToken: user.uid }
// })
// .then(r => console.log("Successful Upsert", r))
// .catch(error => console.log("Upsert error!!!!", error));
const token = await user.getIdToken(); const token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult(); const idTokenResult = await user.getIdTokenResult();

View File

@@ -2,6 +2,7 @@ import React from "react";
import { auth } from "../../firebase/firebase.utils"; import { auth } from "../../firebase/firebase.utils";
import { Form, Icon, Input, Button, Alert } from "antd"; import { Form, Icon, Input, Button, Alert } from "antd";
import { UPSERT_USER } from "../../graphql/user.queries";
class SignInForm extends React.Component { class SignInForm extends React.Component {
constructor() { constructor() {
super(); super();
@@ -12,11 +13,27 @@ class SignInForm extends React.Component {
handleSubmit = e => { handleSubmit = e => {
e.preventDefault(); e.preventDefault();
const { apolloClient } = this.props;
this.props.form.validateFields(async (err, values) => { this.props.form.validateFields(async (err, values) => {
if (!err) { if (!err) {
const { email, password } = values; const { email, password } = values;
try { try {
await auth.signInWithEmailAndPassword(email, password); const { user } = await auth.signInWithEmailAndPassword(
email,
password
);
apolloClient
.mutate({
mutation: UPSERT_USER,
variables: { authEmail: user.email, authToken: user.uid }
})
.then(r => console.log("Successful Upsert", r))
.catch(error => {
console.log("Upsert error!!!!", error);
});
this.props.form.resetFields(); this.props.form.resetFields();
} catch (error) { } catch (error) {
this.setState({ ...this.state, errorMessage: error.message }); this.setState({ ...this.state, errorMessage: error.message });
@@ -28,6 +45,7 @@ class SignInForm extends React.Component {
render() { render() {
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const { errorMessage } = this.state; const { errorMessage } = this.state;
return ( return (
<Form onSubmit={this.handleSubmit} className="login-form"> <Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item label="E-mail"> <Form.Item label="E-mail">

View File

@@ -0,0 +1,13 @@
import React from "react";
import { ApolloConsumer } from "react-apollo";
import SignInFormComponent from "./sign-in-form.component";
export default function SignInFormContainer() {
return (
<ApolloConsumer>
{client => {
return <SignInFormComponent apolloClient={client} />;
}}
</ApolloConsumer>
);
}

View File

@@ -1,11 +1,11 @@
import React from "react"; import React from "react";
import firebase from "../../firebase/firebase.utils"; import firebase from "../../firebase/firebase.utils";
export default function SignOut() { export default function SignOut({ match }) {
const signOut = async () => { const signOut = async () => {
try { try {
await firebase.auth().signOut(); await firebase.auth().signOut();
console.log("Signin out!"); console.log("match", match);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }

View File

@@ -6,7 +6,7 @@ export const UPSERT_USER = gql`
objects: [{ email: $authEmail, authid: $authToken }] objects: [{ email: $authEmail, authid: $authToken }]
on_conflict: { constraint: users_pkey, update_columns: [authid] } on_conflict: { constraint: users_pkey, update_columns: [authid] }
) { ) {
returning { data {
authid authid
} }
} }

View File

@@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import SignInComponent from "../../components/sign-in-form/sign-in-form.component"; import SignInContainer from "../../components/sign-in-form/sign-in-form.container";
export default () => { export default () => {
return <SignInComponent />; return <SignInContainer />;
}; };

View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: users
schema: public
type: drop_insert_permission

View File

@@ -0,0 +1,14 @@
- args:
permission:
allow_upsert: true
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: users
schema: public
type: create_insert_permission

View File

@@ -0,0 +1,19 @@
- args:
role: user
table:
name: users
schema: public
type: drop_insert_permission
- args:
permission:
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: users
schema: public
type: create_insert_permission

View File

@@ -0,0 +1,21 @@
- args:
role: user
table:
name: users
schema: public
type: drop_insert_permission
- args:
permission:
check: {}
columns:
- authid
- email
localPresets:
- key: ""
value: ""
set: {}
role: user
table:
name: users
schema: public
type: create_insert_permission