78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
//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 { Spin } from "antd";
|
|
|
|
export default function Auth() {
|
|
const [authState, setAuthState] = useState({ status: "loading" });
|
|
|
|
useEffect(() => {
|
|
return firebase.auth().onAuthStateChanged(async user => {
|
|
console.log("User in App Container.js: ", user);
|
|
if (user) {
|
|
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 });
|
|
});
|
|
}
|
|
|
|
console.log("#####Logged In. make a gql call to upsert", user);
|
|
|
|
|
|
} else {
|
|
setAuthState({ status: "out" });
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const signOut = async () => {
|
|
try {
|
|
setAuthState({ status: "loading" });
|
|
await firebase.auth().signOut();
|
|
setAuthState({ status: "out" });
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
let content;
|
|
if (authState.status === "loading") {
|
|
content = <Spin size="large" />;
|
|
} else {
|
|
content = (
|
|
<>
|
|
<div>
|
|
{authState.status === "in" ? (
|
|
<div>
|
|
<h2>Welcome, {authState.user.displayName}</h2>
|
|
<button onClick={signOut}>Sign out</button>
|
|
</div>
|
|
) : (
|
|
<div>Sign in</div>
|
|
)}
|
|
</div>
|
|
|
|
<App authState={authState} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
return <div className="auth">{content}</div>;
|
|
}
|