Comment on page
Authentication Methods
Crema supports JWT Auth, Auth0, Firebase, Aws auth methods
Crema supports 4 types of authentication methods as follows. By default, Crema comes with the Firebase authentication method. You can switch between them by following some steps written in the particular Auth method.
Don't forget to change the header in case you have a different form "Authorization"
- 1.JWT AuthJSON Web Token is a proposed Internet standard for creating data with an optional signature.To integrate JWT Auth you need to follow the following steps.
- 1.Open the
src/@crema/services/auth/jwt-auth/index.js
file and update baseURL of your server like the belowconst jwtAxios = axios.create({baseURL: 'YOUR_API_URL HERE',headers: {'Content-Type': 'application/json',},}); - 2.Set header token in the Axios, go to the file
src/@crema/services/auth/jwt-auth/index.js
and change theexport const setAuthToken = (token) => {if (token) {jwtAxios.defaults.headers.common['Authorization'] = 'Bearer ' + token;// Change this according your requirementlocalStorage.setItem('token', token);} else {delete jwtAxios.defaults.headers.common['Authorization'];localStorage.removeItem('token');}}; - 3.Update the AppAuthProvider component in the file
src/@crema/core/AppAuthProvider/index.js
like below.const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError} =useInfoViewActionsContext();return (<JWTAuthProviderfetchStart={fetchStart}fetchError={fetchError}fetchSuccess={fetchSuccess}>{children}</JWTAuthProvider>);};export default AppAuthProvider; - 4.Uncomment the JWT Auth method like below in the
src/@crema/hooks/AuthHooks.js
file and comment out the previous hooks// ForJWT Authimport {getUserFromJwtAuth} from "@crema/helpers/AuthHelper";import {useJWTAuth, useJWTAuthActions} from "@crema/services/auth/jwt-auth/JWTAuthProvider";export const useAuthUser = () => {const { user, isAuthenticated, isLoading } = useJWTAuth();return {isLoading,isAuthenticated,user: getUserFromJwtAuth(user),};};export const useAuthMethod = () => {const { signInUser, signUpUser, logout } = useJWTAuthActions();return {signInUser,logout,signUpUser,};}; - 5.In the final step, we need to call the
<SigninJwtAuth>
tag in thesrc/modules/auth/Signin/index.js
file like below and do the same for Signup and other auth pages.import SigninJwtAuth from './SigninJwtAuth';export default SigninJwtAuth;
- 2.FirebaseFirebase security applies Google's internal expertise to easily build app sign-ins. Develop simple, free multi-platform sign-in with Firebase Authentication. To integrate Firebase Auth you need to follow the following steps.
- 1.
- 2.Open the
src/@crema/services/auth/firebase/firebase.js
file and update firebaseConfig for your app like the belowconst firebaseConfig = {apiKey: 'XXXXXXXXXXXXXXXXXXX',authDomain: 'XXXXXXXXXX.firebaseapp.com',projectId: 'XXXXXXXXXX',storageBucket: 'XXXXXXXXXX.appspot.com',messagingSenderId: 'XXXXXXXXXX',appId: '1:XXXXXXXXXX:web:XXXXXXXXXX',measurementId: 'G-XXXXXXXXXX',}; - 3.Update the AppAuthProvider component in the file
src/@crema/core/AppAuthProvider/index.js
like below.import React from 'react';import {useInfoViewActionsContext} from '@crema/context/AppContextProvider/InfoViewContextProvider';import FirebaseAuthProvider from '@crema/services/auth/firebase/FirebaseAuthProvider';import PropTypes from 'prop-types';const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError, showMessage} =useInfoViewActionsContext();return (<FirebaseAuthProviderfetchStart={fetchStart}fetchError={fetchError}fetchSuccess={fetchSuccess}showMessage={showMessage}>{children}</FirebaseAuthProvider>);};AppAuthProvider.propTypes = {children: PropTypes.node,};export default AppAuthProvider; - 4.Uncomment the Firebase Auth method like below in the
src/@crema/hooks/AuthHooks.js
file//For Firebase Authimport {useFirebase,useFirebaseActions,} from '@crema/services/auth/firebase/FirebaseAuthProvider';import {getUserFromFirebase} from '@crema/helpers/AuthHelper';export const useAuthUser = () => {const {user, isAuthenticated, isLoading} = useFirebase();return {isLoading,isAuthenticated,user: getUserFromFirebase(user),};};export const useAuthMethod = () => {const {logInWithEmailAndPassword,registerUserWithEmailAndPassword,logInWithPopup,logout,} = useFirebaseActions();return {logInWithEmailAndPassword,registerUserWithEmailAndPassword,logInWithPopup,logout,};}; - 5.In the final step, we need to call the
<SigninFirebase>
tag in thesrc/modules/auth/Signin/index.js
file like below and do the same for Signup and other auth pages.
import SigninFirebase from './SigninFirebase';export default SigninFirebase; - 3.AWSAmazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. To integrate AWS Auth you need to follow the following steps.
- 1.
- 2.Open the
src/@crema/services/auth/aws-cognito/aws-exports.js
file and update awsConfig for your app like belowexport const awsConfig = {aws_project_region: 'us-east-1',aws_cognito_identity_pool_id:'us-east-1:XXXXXXXXXX,aws_cognito_region: 'us-east-1',aws_user_pools_id: 'us-east-XXXXXXXXXX',aws_user_pools_web_client_id: 'XXXXXXXXXX',oauth: {domain: 'XXXXXXXXXX.auth.us-east-1.amazoncognito.com',scope: ['phone','email','openid','profile','aws.cognito.signin.user.admin',],redirectSignIn: 'http://localhost:3000/',redirectSignOut: 'http://localhost:3000/',responseType: 'code',},federationTarget: 'COGNITO_USER_POOLS',}; - 3.Update the AppAuthProvider component in the file
src/@crema/core/AppAuthProvider/index.js
like below.import React from 'react';import {useInfoViewActionsContext} from '@crema/context/AppContextProvider/InfoViewContextProvider';import AWSAuthProvider from '@crema/services/auth/aws-cognito/AWSAuthProvider';import PropTypes from 'prop-types';const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError, showMessage} =useInfoViewActionsContext();return (<AWSAuthProviderfetchStart={fetchStart}fetchError={fetchError}fetchSuccess={fetchSuccess}showMessage={showMessage}>{children}</AWSAuthProvider>);};AppAuthProvider.propTypes = {children: PropTypes.node,};export default AppAuthProvider; - 4.Uncomment the AWS Auth method like below in the
src/@crema/hooks/AuthHooks.js
file// For AWS Authimport {getUserFromAWS} from '@crema/helpers/AuthHelper';import {useAwsCognito, useAwsCognitoActions} from '../services/auth';export const useAuthUser = () => {// eslint-disable-next-line no-undefconst {auth, user, isAuthenticated, isLoading} = useAwsCognito();return {auth,isLoading,isAuthenticated,user: getUserFromAWS(user),};};export const useAuthMethod = () => {const {signIn, signUpCognitoUser, confirmCognitoUserSignup, logout} =useAwsCognitoActions();return {signIn,signUpCognitoUser,confirmCognitoUserSignup,logout,};}; - 5.In the final step, we need to call the
<SigninAwsCognito>
tag in thesrc/modules/auth/Signin/index.js
file like below and do the same for Signup.import SigninAwsCognito from './SigninAwsCognito';export default SigninAwsCognito;
- 4.Auth0Rapidly integrate authentication and authorization for web, mobile, and legacy applications. To integrate. Auth0 you need to follow the following steps.
- 1.
- 2.Open the
src/@crema/services/auth/auth0/auth0Config.js
file and update Auth0Config for your app like belowconst Auth0Config = async () => {return await createAuth0Client({client_id: 'XXXXXXXXXX',domain: 'XXXXXXXXXX.auth0.com',redirect_uri: 'XXXXXXXXXX',audience: 'https://XXXXXXXXXX.auth0.com/userinfo',});}; - 3.Update the AppAuthProvider component in the file
apps/source/src/core/AppAuthProvider/index.js
like below.import React from 'react';import {useInfoViewActionsContext} from '@crema/context/AppContextProvider/InfoViewContextProvider';import Auth0Provider from '@crema/services/auth/auth0/Auth0Provider';import PropTypes from 'prop-types';const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError, showMessage} =useInfoViewActionsContext();return <Auth0Provider>{children}</Auth0Provider>;};AppAuthProvider.propTypes = {children: PropTypes.node,};export default AppAuthProvider; - 4.Uncomment the Auth0 Auth method like the below in the
src/@crema/hooks/AuthHooks.js
fil//For Auth0import {useAuth0} from '@auth0/auth0-react';import {useMemo} from 'react';import {getUserFromAuth0} from '@crema/helpers/AuthHelper';export const useAuthUser = () => {const {user, isAuthenticated, isLoading} = useAuth0();return {isLoading,isAuthenticated,user: useMemo(() => getUserFromAuth0(user), []),};};export const useAuthMethod = () => {const {loginWithRedirect, logout} = useAuth0();return {loginWithRedirect, logout};}; - 5.In the final step, we need to call the loginWithRedirect method on the Login button.
Last modified 21d ago