Authentication Methods
Crema supports JWT Auth, Auth0, Firebase, Aws auth methods
Crema supports 4 types of authentication methods as following. By default Crema comes with the firebase authentication method. You can switch between them by the following some steps written in the particular Auth method.
Don't forgot to change header in case you have different from "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 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 the
export 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');}};- 1.Wrapp
<AuthRoutes
> with<JWTAuthProvider>
Component in thesrc/App.js
file like below.const App = () => (<AppContextProvider>...<JWTAuthProvider> //Add the line<AuthRoutes><CssBaseline /><AppLayout /></AuthRoutes></JWTAuthProvider>...</AppContextProvider>);export default App; - 2.Uncomment the JWT Auth method like below in the
src/@crema/utility/AuthHooks.js
file// ForJWT Authimport {getUserFromJwtAuth} from './helper/AuthHelper';import {useJWTAuth,useJWTAuthActions,} from '../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,};}; - 3.In the final step, we need to call the
<SigninJwtAuth>
tag in thesrc/pages/auth/Signin/index.js
file like below and do the same for Signup.const SignIn = () => {return (<Box>...<SigninJwtAuth />...</Box>);};export default SignIn;
- 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 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.Wrapp
<AuthRoutes
> with<FirebaseAuthProvider>
Component in thesrc/App.js
file like below.const App = () => (<AppContextProvider>...<FirebaseAuthProvider> //Add the line<AuthRoutes><CssBaseline /><AppLayout /></AuthRoutes></FirebaseAuthProvider>...</AppContextProvider>);export default App; - 4.Uncomment the Firebase Auth method like below in the
src/@crema/utility/AuthHooks.js
fileimport {useFirebase,useFirebaseActions,} from '../services/auth/firebase/FirebaseAuthProvider';import {getUserFromFirebase} from './helper/AuthHelper';export const useAuthUser = () => {const {user, isAuthenticated, isLoading} = useFirebase();return {isLoading,isAuthenticated,user: getUserFromFirebase(user),};};export const useAuthMethod = () => {const {signInWithEmailAndPassword,createUserWithEmailAndPassword,signInWithPopup,logout,} = useFirebaseActions();return {signInWithEmailAndPassword,createUserWithEmailAndPassword,signInWithPopup,logout,};}; - 5.In the final step, we need to call the
<SigninFirebase>
tag in thesrc/pages/auth/Signin/index.js
file like below and do the same for Signup.const SignIn = () => {return (<Box>...<SigninFirebase />...</Box>);};export default SignIn;
- 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.Wrapp
<AuthRoutes
> with<AwsAuthProvider>
Component in thesrc/App.js
file like below.const App = () => (<AppContextProvider>...<AwsAuthProvider> //Add the line<AuthRoutes><CssBaseline /><AppLayout /></AuthRoutes></AwsAuthProvider>...</AppContextProvider>);export default App; - 4.Uncomment the AWS Auth method like below in the
src/@crema/utility/AuthHooks.js
fileimport {getUserFromAWS} from './helper/AuthHelper';import {useAwsCognito,useAwsCognitoActions,} from '../services/auth/aws-cognito/AWSAuthProvider';export const useAuthUser = () => {const {user, isAuthenticated, isLoading} = useAwsCognito();return {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/pages/auth/Signin/index.js
file like below and do the same for Signup.const SignIn = () => {return (<Box>...<SigninAwsCognito/>...</Box>);};export default SignIn;
- 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.Wrapp
<AuthRoutes
> with<Auth0Provider>
Component in thesrc/App.js
file like below.....import Auth0Provider from "./@crema/services/auth/auth0/Auth0Provider";const App = () => (<AppContextProvider>...<Auth0Provider> //Add the line<AuthRoutes><CssBaseline /><AppLayout /></AuthRoutes></AwsAuthProvider>...</Auth0Provider>);export default App; - 4.Uncomment the Auth0 Auth method like below in the
src/@crema/utility/AuthHooks.js
fileexport const useAuthUser = () => {const {user, isAuthenticated, isLoading} = useAuth0();console.log('user, isAuthenticated, isLoading',user,isAuthenticated,isLoading,);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 11mo ago