mirror of
https://github.com/rowyio/rowy.git
synced 2025-12-29 00:16:39 +01:00
separate firebase ui code for reuse
This commit is contained in:
Sidney Alcantara
235
www/src/components/Auth/FirebaseUi.tsx
Normal file
235
www/src/components/Auth/FirebaseUi.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
|
||||
import { Props as FirebaseUiProps } from "react-firebaseui";
|
||||
|
||||
import { makeStyles, createStyles, Typography } from "@material-ui/core";
|
||||
import { fade } from "@material-ui/core/styles";
|
||||
import Skeleton from "@material-ui/lab/Skeleton";
|
||||
|
||||
import { auth, db } from "../../firebase";
|
||||
import { defaultUiConfig, getSignInOptions } from "../../firebase/firebaseui";
|
||||
|
||||
const useStyles = makeStyles((theme) =>
|
||||
createStyles({
|
||||
"@global": {
|
||||
".firetable-firebaseui": {
|
||||
"& .firebaseui-container": {
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.text.primary,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
},
|
||||
"& .firebaseui-text": {
|
||||
color: theme.palette.text.secondary,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
},
|
||||
"& .firebaseui-title": {
|
||||
...theme.typography.h5,
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
"& .firebaseui-subtitle": {
|
||||
...theme.typography.h6,
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
"& .firebaseui-error": {
|
||||
...theme.typography.caption,
|
||||
color: theme.palette.error.main,
|
||||
},
|
||||
|
||||
"& .firebaseui-card-content, & .firebaseui-card-footer": { padding: 0 },
|
||||
"& .firebaseui-idp-list, & .firebaseui-tenant-list": { margin: 0 },
|
||||
"& .firebaseui-idp-list>.firebaseui-list-item, & .firebaseui-tenant-list>.firebaseui-list-item": {
|
||||
margin: 0,
|
||||
},
|
||||
"& .firebaseui-list-item + .firebaseui-list-item": {
|
||||
paddingTop: theme.spacing(2),
|
||||
},
|
||||
|
||||
"& .mdl-button": {
|
||||
borderRadius: 24,
|
||||
...theme.typography.button,
|
||||
},
|
||||
"& .mdl-button--raised": { boxShadow: "none" },
|
||||
"& .mdl-card": {
|
||||
boxShadow: "none",
|
||||
minHeight: 0,
|
||||
},
|
||||
"& .mdl-button--primary.mdl-button--primary": {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
"& .mdl-button--raised.mdl-button--colored": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
|
||||
"&:active, &:focus:not(:active), &:hover": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
|
||||
"& .firebaseui-idp-button, & .firebaseui-tenant-button": {
|
||||
maxWidth: "none",
|
||||
minHeight: 48,
|
||||
},
|
||||
"& .firebaseui-idp-text": {
|
||||
...theme.typography.button,
|
||||
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2) + 18,
|
||||
marginLeft: -18,
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
"&.firebaseui-idp-text-long": { display: "none" },
|
||||
"&.firebaseui-idp-text-short": { display: "table-cell" },
|
||||
},
|
||||
},
|
||||
|
||||
"& .firebaseui-idp-google": {
|
||||
backgroundColor: "#4285F4 !important",
|
||||
|
||||
"& .firebaseui-idp-icon-wrapper::before": {
|
||||
content: "''",
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 2,
|
||||
left: 2,
|
||||
width: 48 - 4,
|
||||
height: 48 - 4,
|
||||
zIndex: 0,
|
||||
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "50%",
|
||||
},
|
||||
"& .firebaseui-idp-icon-wrapper img": {
|
||||
position: "relative",
|
||||
left: -1,
|
||||
},
|
||||
|
||||
"&>.firebaseui-idp-text": {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
'& .firebaseui-idp-github, & [data-provider-id="microsoft.com"]': {
|
||||
backgroundColor: "#000 !important",
|
||||
},
|
||||
|
||||
"& .firebaseui-card-header": { padding: 0 },
|
||||
"& .firebaseui-card-actions": { padding: 0 },
|
||||
|
||||
"& .firebaseui-input, & .firebaseui-input-invalid": {
|
||||
...theme.typography.body1,
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
"& .firebaseui-textfield.mdl-textfield .firebaseui-input": {
|
||||
borderColor: theme.palette.divider,
|
||||
},
|
||||
"& .mdl-textfield.is-invalid .mdl-textfield__input": {
|
||||
borderColor: theme.palette.error.main,
|
||||
},
|
||||
"& .firebaseui-label": {
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
"& .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.is-focused .mdl-textfield__label": {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
"& .firebaseui-textfield.mdl-textfield .firebaseui-label:after": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
"& .mdl-textfield.is-invalid .mdl-textfield__label:after": {
|
||||
backgroundColor: theme.palette.error.main,
|
||||
},
|
||||
|
||||
"& .mdl-progress>.bufferbar": {
|
||||
background: fade(theme.palette.primary.main, 0.25),
|
||||
},
|
||||
"& .mdl-progress>.progressbar": {
|
||||
backgroundColor: theme.palette.primary.main + " !important",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
signInText: {
|
||||
display: "none",
|
||||
[theme.breakpoints.down("xs")]: { display: "block" },
|
||||
|
||||
textAlign: "center",
|
||||
color: theme.palette.text.disabled,
|
||||
marginBottom: theme.spacing(-1),
|
||||
},
|
||||
|
||||
skeleton: {
|
||||
marginBottom: theme.spacing(-4),
|
||||
|
||||
"& > *": {
|
||||
width: "100%",
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
},
|
||||
|
||||
"& > * + *": {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
export default function FirebaseUi(props: Partial<FirebaseUiProps>) {
|
||||
const classes = useStyles();
|
||||
|
||||
const [signInOptions, setSignInOptions] = useState<
|
||||
Parameters<typeof getSignInOptions>[0] | undefined
|
||||
>();
|
||||
useEffect(() => {
|
||||
db.doc("/_FIRETABLE_/publicSettings")
|
||||
.get()
|
||||
.then((doc) => {
|
||||
const signInOptions = doc?.get("signInOptions");
|
||||
setSignInOptions(signInOptions);
|
||||
})
|
||||
.catch(() => {
|
||||
setSignInOptions({ google: true });
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!signInOptions)
|
||||
return (
|
||||
<div
|
||||
id="firetable-firebaseui-skeleton"
|
||||
className={classes.skeleton}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<Skeleton variant="rect" />
|
||||
<Skeleton variant="rect" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const uiConfig: firebaseui.auth.Config = {
|
||||
...defaultUiConfig,
|
||||
...props.uiConfig,
|
||||
signInOptions: getSignInOptions(signInOptions),
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography variant="button" className={classes.signInText}>
|
||||
Sign in with
|
||||
</Typography>
|
||||
|
||||
<div id="firetable-firebaseui-skeleton" className={classes.skeleton}>
|
||||
{Object.keys(signInOptions).map((_, i) => (
|
||||
<Skeleton key={i} variant="rect" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<StyledFirebaseAuth
|
||||
{...props}
|
||||
firebaseAuth={auth}
|
||||
uiConfig={uiConfig}
|
||||
className={clsx("firetable-firebaseui", props.className)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,18 @@
|
||||
import firebase from "firebase/app";
|
||||
import * as firebaseui from "firebaseui";
|
||||
|
||||
export const defaultUiConfig: firebaseui.auth.Config = {
|
||||
signInFlow: "popup",
|
||||
signInSuccessUrl: "/",
|
||||
callbacks: {
|
||||
uiShown: () => {
|
||||
const node = document.getElementById("firetable-firebaseui-skeleton");
|
||||
if (node) node.style.display = "none";
|
||||
},
|
||||
},
|
||||
signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
|
||||
};
|
||||
|
||||
const authOptions = {
|
||||
google: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
|
||||
twitter: firebase.auth.TwitterAuthProvider.PROVIDER_ID,
|
||||
@@ -15,20 +28,12 @@ const authOptions = {
|
||||
requireDisplayName: true,
|
||||
disableSignUp: { status: true },
|
||||
},
|
||||
anonymous: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
|
||||
}
|
||||
export const getUiConfig = (selectedSignInOptions: { google?: Boolean, twitter?: Boolean, github?: Boolean, facebook?: Boolean, email?: Boolean,microsoft?:Boolean, apple?: Boolean,anonymous?:Boolean}) => ({
|
||||
signInFlow: "popup",
|
||||
signInSuccessUrl: "/",
|
||||
signInOptions: Object.keys(selectedSignInOptions).map((option) => {
|
||||
if (selectedSignInOptions[option]) {
|
||||
return authOptions[option]
|
||||
}
|
||||
}).filter((option) =>option),
|
||||
callbacks: {
|
||||
uiShown: () => {
|
||||
const node = document.getElementById("firetable-firebaseui-skeleton");
|
||||
if (node) node.style.display = "none";
|
||||
},
|
||||
},
|
||||
});
|
||||
anonymous: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
|
||||
};
|
||||
|
||||
export const getSignInOptions = (
|
||||
selected: Partial<Record<keyof typeof authOptions, boolean>>
|
||||
): firebaseui.auth.Config["signInOptions"] =>
|
||||
Object.keys(selected)
|
||||
.map((option) => (selected[option] ? authOptions[option] : null))
|
||||
.filter((option) => option !== null);
|
||||
@@ -1,210 +1,12 @@
|
||||
import React,{useState,useEffect} from "react";
|
||||
import { auth,db } from "../../firebase";
|
||||
import { getUiConfig } from "constants/firebaseui";
|
||||
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
|
||||
|
||||
import { makeStyles, createStyles, Typography } from "@material-ui/core";
|
||||
import { fade } from "@material-ui/core/styles";
|
||||
import Skeleton from "@material-ui/lab/Skeleton";
|
||||
import React from "react";
|
||||
|
||||
import AuthLayout from "components/Auth/AuthLayout";
|
||||
import * as firebaseui from "firebaseui";
|
||||
|
||||
const useStyles = makeStyles((theme) =>
|
||||
createStyles({
|
||||
"@global": {
|
||||
".firetable-firebaseui": {
|
||||
"& .firebaseui-container": {
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.text.primary,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
},
|
||||
"& .firebaseui-text": {
|
||||
color: theme.palette.text.secondary,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
},
|
||||
"& .firebaseui-title": {
|
||||
...theme.typography.h5,
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
"& .firebaseui-subtitle": {
|
||||
...theme.typography.h6,
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
"& .firebaseui-error": {
|
||||
...theme.typography.caption,
|
||||
color: theme.palette.error.main,
|
||||
},
|
||||
|
||||
"& .firebaseui-card-content, & .firebaseui-card-footer": { padding: 0 },
|
||||
"& .firebaseui-idp-list, & .firebaseui-tenant-list": { margin: 0 },
|
||||
"& .firebaseui-idp-list>.firebaseui-list-item, & .firebaseui-tenant-list>.firebaseui-list-item": {
|
||||
margin: 0,
|
||||
},
|
||||
"& .firebaseui-list-item + .firebaseui-list-item": {
|
||||
paddingTop: theme.spacing(2),
|
||||
},
|
||||
|
||||
"& .mdl-button": {
|
||||
borderRadius: 24,
|
||||
...theme.typography.button,
|
||||
},
|
||||
"& .mdl-button--raised": { boxShadow: "none" },
|
||||
"& .mdl-card": {
|
||||
boxShadow: "none",
|
||||
minHeight: 0,
|
||||
},
|
||||
"& .mdl-button--primary.mdl-button--primary": {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
"& .mdl-button--raised.mdl-button--colored": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
|
||||
"&:active, &:focus:not(:active), &:hover": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
|
||||
"& .firebaseui-idp-button, & .firebaseui-tenant-button": {
|
||||
maxWidth: "none",
|
||||
minHeight: 48,
|
||||
},
|
||||
"& .firebaseui-idp-text": {
|
||||
...theme.typography.button,
|
||||
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2) + 18,
|
||||
marginLeft: -18,
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
"&.firebaseui-idp-text-long": { display: "none" },
|
||||
"&.firebaseui-idp-text-short": { display: "table-cell" },
|
||||
},
|
||||
},
|
||||
|
||||
"& .firebaseui-idp-google": {
|
||||
backgroundColor: "#4285F4 !important",
|
||||
|
||||
"& .firebaseui-idp-icon-wrapper::before": {
|
||||
content: "''",
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 2,
|
||||
left: 2,
|
||||
width: 48 - 4,
|
||||
height: 48 - 4,
|
||||
zIndex: 0,
|
||||
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "50%",
|
||||
},
|
||||
"& .firebaseui-idp-icon-wrapper img": {
|
||||
position: "relative",
|
||||
left: -1,
|
||||
},
|
||||
|
||||
"&>.firebaseui-idp-text": {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
'& .firebaseui-idp-github, & [data-provider-id="microsoft.com"]': {
|
||||
backgroundColor: "#000 !important",
|
||||
},
|
||||
|
||||
"& .firebaseui-card-header": { padding: 0 },
|
||||
"& .firebaseui-card-actions": { padding: 0 },
|
||||
|
||||
"& .firebaseui-input, & .firebaseui-input-invalid": {
|
||||
...theme.typography.body1,
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
"& .firebaseui-textfield.mdl-textfield .firebaseui-input": {
|
||||
borderColor: theme.palette.divider,
|
||||
},
|
||||
"& .mdl-textfield.is-invalid .mdl-textfield__input": {
|
||||
borderColor: theme.palette.error.main,
|
||||
},
|
||||
"& .firebaseui-label": {
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
"& .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.is-focused .mdl-textfield__label": {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
"& .firebaseui-textfield.mdl-textfield .firebaseui-label:after": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
"& .mdl-textfield.is-invalid .mdl-textfield__label:after": {
|
||||
backgroundColor: theme.palette.error.main,
|
||||
},
|
||||
|
||||
"& .mdl-progress>.bufferbar": {
|
||||
background: fade(theme.palette.primary.main, 0.25),
|
||||
},
|
||||
"& .mdl-progress>.progressbar": {
|
||||
backgroundColor: theme.palette.primary.main + " !important",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
signInText: {
|
||||
display: "none",
|
||||
[theme.breakpoints.down("xs")]: { display: "block" },
|
||||
|
||||
textAlign: "center",
|
||||
color: theme.palette.text.disabled,
|
||||
marginBottom: theme.spacing(-1),
|
||||
},
|
||||
|
||||
skeleton: {
|
||||
marginBottom: theme.spacing(-4),
|
||||
|
||||
"& > *": {
|
||||
width: "100%",
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
},
|
||||
|
||||
"& > * + *": {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
import FirebaseUi from "components/Auth/FirebaseUi";
|
||||
|
||||
export default function AuthPage() {
|
||||
const classes = useStyles();
|
||||
const [uiConfig,setUiConfig] = useState<firebaseui.auth.Config|undefined>();
|
||||
useEffect(() =>{
|
||||
db.doc("/_FIRETABLE_/publicSettings").get().then((doc) =>{
|
||||
const signInOptions = doc?.get("signInOptions")
|
||||
setUiConfig(getUiConfig(signInOptions))
|
||||
}).catch((err) =>{
|
||||
setUiConfig(getUiConfig({google:true}))
|
||||
})
|
||||
},[])
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
{uiConfig?<>
|
||||
<Typography variant="button" className={classes.signInText}>
|
||||
Sign in with
|
||||
</Typography>
|
||||
|
||||
<div id="firetable-firebaseui-skeleton" className={classes.skeleton}>
|
||||
{uiConfig.signInOptions?.map((_, i) => (
|
||||
<Skeleton key={i} variant="rect" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<StyledFirebaseAuth
|
||||
firebaseAuth={auth}
|
||||
uiConfig={uiConfig}
|
||||
className="firetable-firebaseui"
|
||||
/></>:<><Skeleton variant="rect"/><Skeleton variant="rect"/></>}
|
||||
<FirebaseUi />
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user