app\redux\modules\auth.js
authSlice
, so the font-end part (React components) can get the state to modify ui or contents.
requestAuth: (state) => {
state.loading = true;
state.message = null;
},
requestAuth
function in register container
import { getAuth, updateProfile,
signInWithPopup, createUserWithEmailAndPassword,
GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider
} from 'firebase/auth';
import { requestAuth, loginUser } from 'enl-redux/modules/auth';
const auth = getAuth();
const googleProvider = new GoogleAuthProvider();
const twitterProvider = new TwitterAuthProvider();
const githubProvider = new GithubAuthProvider();
const registerEmail = (values) => {
const { name, email, password } = values;
dispatch(requestAuth());
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
updateProfile(auth.currentUser, {
displayName: name
}).then(() => {
const { user } = userCredential;
if (user) {
dispatch(loginUser(user));
navigate('/app');
}
}).catch((error) => {
dispatch(setMessage(error.message));
});
})
.catch((error) => {
dispatch(setMessage(error.message));
});
};
<RegisterForm
submitForm={(values) => registerEmail(values)}
googleAuth={loginGoogle}
twitterAuth={loginTwitter}
githubAuth={loginGithub}
loading={loading}
messagesAuth={messageAuth}
closeMsg={() => dispatch(hideMessage())}
link="/login-firebase"
/>
app\components\Forms\RegisterForm.js
formik
<FormControl variant="standard" className={classes.formControl}>
<TextField
id="name"
name="name"
label={intl.formatMessage(messages.loginFieldName)}
variant="standard"
value={formik.values.name}
onChange={formik.handleChange}
error={formik.touched.name && Boolean(formik.errors.name)}
helperText={formik.touched.name && formik.errors.name}
className={classes.field}
/>
</FormControl>
app\redux\modules\auth.js
loginUser: (state, action) => {
const user = action.payload;
state.loading = false;
state.user = user;
state.loggedIn = user !== null;
},
logoutUser: (state) => {
state.loading = false;
state.user = null;
state.loggedIn = false;
},
app\containers\Pages\UsersFirebase\Login.js
import {
getAuth, signInWithPopup, signInWithEmailAndPassword,
GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider
} from 'firebase/auth';
import { requestAuth, loginUser } from 'enl-redux/modules/auth';
const googleProvider = new GoogleAuthProvider();
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const { user } = userCredential;
if (user) {
dispatch(loginUser(user));
if (getUrlVars().next) {
// Redirect to next route
navigate(getUrlVars().next);
} else {
// Redirect to dashboard if no next parameter
navigate('/app');
}
}
})
.catch((error) => {
dispatch(setMessage(error.message));
});
<LoginForm
submitForm={(values) => loginEmail(values)}
googleAuth={loginGoogle}
twitterAuth={loginTwitter}
githubAuth={loginGithub}
loading={loading}
messagesAuth={messageAuth}
closeMsg={() => dispatch(hideMessage())}
link="/register-firebase"
/>
app\components\Forms\LoginForm.js
formik
. Example for password field.
<FormControl variant="standard" className={classes.formControl}>
<TextField
id="password"
name="password"
label={intl.formatMessage(messages.loginFieldPassword)}
type={showPassword ? 'text' : 'password'}
variant="standard"
value={formik.values.password}
onChange={formik.handleChange}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password && formik.errors.password}
className={classes.field}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
size="large">
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
)
}}
/>
</FormControl>
app/containers/Pages/UsersFirebase/Login.js
import {
getAuth, signInWithPopup,
GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider
} from 'firebase/auth';
const auth = getAuth();
const googleProvider = new GoogleAuthProvider();
const twitterProvider = new TwitterAuthProvider();
const githubProvider = new GithubAuthProvider();
const loginGoogle = () => {
signInWithPopup(auth, googleProvider)
.then((result) => {
// The signed-in user info.
const { user } = result;
dispatch(loginUser(user));
if (getUrlVars().next) {
// Redirect to next route
navigate(getUrlVars().next);
} else {
// Redirect to dashboard if no next parameter
navigate('/app');
}
}).catch((error) => {
// Handle Errors here.
dispatch(setMessage(error.message));
});
};
const loginTwitter = () => {
signInWithPopup(auth, twitterProvider)
.then((result) => {
// The signed-in user info.
const { user } = result;
dispatch(loginUser(user));
if (getUrlVars().next) {
// Redirect to next route
navigate(getUrlVars().next);
} else {
// Redirect to dashboard if no next parameter
navigate('/app');
}
}).catch((error) => {
// Handle Errors here.
dispatch(setMessage(error.message));
});
};
const loginGithub = () => {
signInWithPopup(auth, githubProvider)
.then((result) => {
// The signed-in user info.
const { user } = result;
dispatch(loginUser(user));
if (getUrlVars().next) {
// Redirect to next route
navigate(getUrlVars().next);
} else {
// Redirect to dashboard if no next parameter
navigate('/app');
}
}).catch((error) => {
// Handle Errors here.
dispatch(setMessage(error.message));
});
};
<LoginForm
submitForm={(values) => loginEmail(values)}
googleAuth={loginGoogle}
twitterAuth={loginTwitter}
githubAuth={loginGithub}
loading={loading}
messagesAuth={messageAuth}
closeMsg={() => dispatch(hideMessage())}
link="/register-firebase"
/>
app/components/Forms/LoginForm.js
<section className={classes.socmedSideLogin}>
<Button
variant="contained"
className={classes.redBtn}
type="button"
size="large"
onClick={googleAuth}
>
<i className="ion-logo-google" />
Google
</Button>
<Button
variant="contained"
className={classes.cyanBtn}
type="button"
size="large"
onClick={twitterAuth}
>
<i className="ion-logo-twitter" />
Twitter
</Button>
<Button
variant="contained"
className={classes.greyBtn}
type="button"
size="large"
onClick={githubAuth}
>
<i className="ion-logo-github" />
Github
</Button>
</section>
app\containers\Pages\UsersFirebase\ResetPassword.js
import { getAuth, sendPasswordResetEmail } from 'firebase/auth';
const auth = getAuth();
const resetPwd = (values) => {
const { email } = values;
sendPasswordResetEmail(auth, email)
.then(() => {
dispatch(setMessage('LINK.PASSWORD_RESET.SENT'));
})
.catch((error) => {
dispatch(setMessage(error.message));
});
};
<ResetForm
submitForm={(values) => resetPwd(values)}
messagesAuth={messageAuth}
closeMsg={() => dispatch(hideMessage())}
/>
app\components\Forms\ResetForm.js
fomik
<form onSubmit={formik.handleSubmit}>
<div>
<FormControl variant="standard" className={classes.formControl}>
<TextField
name="email"
variant="standard"
placeholder="Your Email"
label={intl.formatMessage(messages.loginFieldEmail)}
value={formik.values.email}
onChange={formik.handleChange}
className={classes.field}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
/>
</FormControl>
</div>
<div className={classes.btnArea}>
<Button variant="contained" color="primary" type="submit" disabled={formik.isSubmitting || !formik.isValid || !formik.dirty}>
<FormattedMessage {...messages.resetButton} />
<ArrowForward className={cx(classes.rightIcon, classes.iconSmall, classes.signArrow)} />
</Button>
</div>
</form>