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"
JWT Auth
JSON Web Token is a proposed Internet standard for creating data with an optional signature.
The Crema demo is linked with the Mongoose server. You can find our predefined APIs here
To integrate JWT Auth you need to follow the following steps.
Open the src/@crema/core/AppAuthProvider/index.js
file and update baseURL of your server like the below
Copy const jwtAxios = axios .create ({
baseURL : 'YOUR_API_URL HERE' ,
headers : {
'Content-Type' : 'application/json' ,
} ,
});
Set header token in the Axios, go to the file src/@crema/core/AppAuthProvider/index.js
and change the
Copy export const setAuthToken = (token) => {
if (token) {
jwtAxios . defaults . headers .common[ 'Authorization' ] = 'Bearer ' + token; // Change this according your requirement
localStorage .setItem ( 'token' , token);
} else {
delete jwtAxios . defaults . headers .common[ 'Authorization' ];
localStorage .removeItem ( 'token' );
}
};
Update the AppAuthProvider component in the file src/@crema/core/AppAuthProvider/index.js
like below.
Copy const AppAuthProvider = ({children}) => {
const { fetchStart , fetchSuccess , fetchError } =
useInfoViewActionsContext ();
return (
< JWTAuthProvider
fetchStart = {fetchStart}
fetchError = {fetchError}
fetchSuccess = {fetchSuccess}
>
{children}
</ JWTAuthProvider >
);
};
export default AppAuthProvider;
Uncomment the JWT Auth method like below in the src/@crema/hooks/AuthHooks.js
file and comment out the previous hooks
Copy // ForJWT Auth
import {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 ,
};
};
In the final step, we need to call the<SigninJwtAuth>
tag in the src/modules/auth/Signin/index.js
file like below and do the same for Signup and other auth pages.
Copy import SigninJwtAuth from './SigninJwtAuth' ;
export default SigninJwtAuth;
Firebase
Firebase 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.
Open the src/@crema/services/auth/firebase/firebase.js
file and update firebaseConfig for your app like the below
Copy const firebaseConfig = {
apiKey : 'XXXXXXXXXXXXXXXXXXX' ,
authDomain : 'XXXXXXXXXX.firebaseapp.com' ,
projectId : 'XXXXXXXXXX' ,
storageBucket : 'XXXXXXXXXX.appspot.com' ,
messagingSenderId : 'XXXXXXXXXX' ,
appId : '1:XXXXXXXXXX:web:XXXXXXXXXX' ,
measurementId : 'G-XXXXXXXXXX' ,
};
Update the AppAuthProvider component in the file src/@crema/core/AppAuthProvider/index.js
like below.
Copy 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 (
< FirebaseAuthProvider
fetchStart = {fetchStart}
fetchError = {fetchError}
fetchSuccess = {fetchSuccess}
showMessage = {showMessage}
>
{children}
</ FirebaseAuthProvider >
);
};
AppAuthProvider .propTypes = {
children : PropTypes .node ,
};
export default AppAuthProvider;
Uncomment the Firebase Auth method like below in the src/@crema/hooks/AuthHooks.js
file
Copy //For Firebase Auth
import {
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 ,
};
};
In the final step, we need to call the<SigninFirebase>
tag in the src/modules/auth/Signin/index.js
file like below and do the same for Signup and other auth pages.
Copy import SigninFirebase from './SigninFirebase' ;
export default SigninFirebase;
AWS
Amazon 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.
Open the src/@crema/services/auth/aws-cognito/aws-exports.js
file and update awsConfig for your app like below
Copy
export 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' ,
};
Update the AppAuthProvider component in the file src/@crema/core/AppAuthProvider/index.js
like below.
Copy 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 (
< AWSAuthProvider
fetchStart = {fetchStart}
fetchError = {fetchError}
fetchSuccess = {fetchSuccess}
showMessage = {showMessage}
>
{children}
</ AWSAuthProvider >
);
};
AppAuthProvider .propTypes = {
children : PropTypes .node ,
};
export default AppAuthProvider;
Uncomment the AWS Auth method like below in the src/@crema/hooks/AuthHooks.js
file
Copy // For AWS Auth
import {getUserFromAWS} from '@crema/helpers/AuthHelper' ;
import {useAwsCognito , useAwsCognitoActions} from '../services/auth' ;
export const useAuthUser = () => {
// eslint-disable-next-line no-undef
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 ,
};
};
In the final step, we need to call the<SigninAwsCognito>
tag in the src/modules/auth/Signin/index.js
file like below and do the same for Signup .
Copy import SigninAwsCognito from './SigninAwsCognito' ;
export default SigninAwsCognito;
Auth0
Rapidly integrate authentication and authorization for web, mobile, and legacy applications. To integrate. Auth0 you need to follow the following steps.
Open the src/@crema/services/auth/auth0/auth0Config.js
file and update Auth0Config for your app like below
Copy const Auth0Config = async () => {
return await createAuth0Client ({
client_id : 'XXXXXXXXXX' ,
domain : 'XXXXXXXXXX.auth0.com' ,
redirect_uri : 'XXXXXXXXXX' ,
audience : 'https://XXXXXXXXXX.auth0.com/userinfo' ,
});
};
Update the AppAuthProvider component in the file apps/source/src/core/AppAuthProvider/index.js
like below.
Copy 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;
Uncomment the Auth0 Auth method like the below in the src/@crema/hooks/AuthHooks.js
fil
Copy //For Auth0
import {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};
};
In the final step, we need to call the loginWithRedirect method on the Login button.