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
libs/services/auth/src/jwt-auth/index.js
file and update baseURL of your server like 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
libs/services/auth/src/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
apps/source/src/core/AppAuthProvider/index.js
like below.const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError, showMessage} =useInfoViewActionsContext();return (<JWTAuthProviderfetchStart={fetchStart}fetchError={fetchError}fetchSuccess={fetchSuccess}showMessage={showMessage}>{children}</JWTAuthProvider>);};export default AppAuthProvider; - 4.Uncomment the JWT Auth method like below in the
libs/hooks/src/AuthHooks.js
file and comment out the previous hooks// ForJWT Authimport { getUserFromJwtAuth } from '@crema/helpers/AuthHelper';import {useJWTAuth,useJWTAuthActions,} from "@crema/services/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 theapps/source/src/modules/auth/Signin/index.js
file like below and do the same for Signup.import { SigninJwtAuth } from '@crema/modules/auth/SignIn';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
libs/services/auth/src/firebase/firebase.js
file and update firebaseConfig for your app like 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
apps/source/src/core/AppAuthProvider/index.js
like below.const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError, showMessage} =useInfoViewActionsContext();return (<FirebaseAuthProviderfetchStart={fetchStart}fetchError={fetchError}fetchSuccess={fetchSuccess}showMessage={showMessage}>{children}</FirebaseAuthProvider>);}; - 4.Uncomment the Firebase Auth method like below in the
libs/hooks/src/AuthHooks.js
file//For Firebase Authimport {useFirebase,useFirebaseActions,} from '@crema/services/auth/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 theapps/source/src/modules/auth/Signin/index.js
file like below and do the same for Signup.import { SigninFirebase } from '@crema/modules/auth/SignIn';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
libs/services/auth/src/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
apps/source/src/core/AppAuthProvider/index.js
like below.const AppAuthProvider = ({children}) => {const {fetchStart, fetchSuccess, fetchError, showMessage} =useInfoViewActionsContext();return (<AWSAuthProviderfetchStart={fetchStart}fetchError={fetchError}fetchSuccess={fetchSuccess}showMessage={showMessage}>{children}</AWSAuthProvider>);}; - 4.Uncomment the AWS Auth method like below in the
libs/hooks/src/AuthHooks.js
file// For AWS Authimport {getUserFromAWS} from '@crema/helpers/AuthHelper';import {useAwsCognito,useAwsCognitoActions,} from '@crema/services/auth/AWSAuthProvider';export const useAuthUser = () => {const {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 theapps/source/src/modules/auth/Signin/index.js
file like below and do the same for Signup.import { SigninAwsCognito } from '@crema/modules/auth/SignIn';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
libs/services/auth/src/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.const AppAuthProvider = ({children}) => {return <Auth0Provider>{children}</Auth0Provider>;}; - 4.Wrap
<AuthRoutes
> with<
AppAuthProvider>
Component in theapps/source/
src/core/AppAuthProvider/index.js
a file like below.//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 loginWithRedirect method on the Login button.
Last modified 2mo ago