# Authentication 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. {% hint style="info" %} Don't forget to change the header in case you have a different form "Authorization" {% endhint %} 1. **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](broken://pages/4h26dbVTkxOQZr5lDRO1) To integrate JWT Auth you need to follow the following steps. 1. Open the `src/@crema/core/AppAuthProvider/index.js` file and update baseURL of your server like the below ```javascript const 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/core/AppAuthProvider/index.js` and change the ```javascript 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'); } }; ``` 3. Update the AppAuthProvider component in the file `src/@crema/core/AppAuthProvider/index.js` like below. ```javascript const AppAuthProvider = ({children}) => { const {fetchStart, fetchSuccess, fetchError} = useInfoViewActionsContext(); return ( {children} ); }; 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 ```javascript // 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, }; }; ``` 5. In the final step, we need to call the`` tag in the `src/modules/auth/Signin/index.js` file like below and do the same for **Signup** and other auth pages. ```javascript import SigninJwtAuth from './SigninJwtAuth'; export default SigninJwtAuth; ``` 2. **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. 1. Configure your app [here](https://firebase.google.com/docs/auth) 2. Open the `src/@crema/services/auth/firebase/firebase.js` file and update **firebaseConfig** for your app like the below ```javascript const 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. ```javascript 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 ( {children} ); }; AppAuthProvider.propTypes = { children: PropTypes.node, }; export default AppAuthProvider; ``` 4. Uncomment the Firebase Auth method like below in the `src/@crema/hooks/AuthHooks.js` file ```javascript //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, }; }; ``` 5. In the final step, we need to call the`` tag in the `src/modules/auth/Signin/index.js` file like below and do the same for **Signup** and other auth pages. ```javascript import SigninFirebase from './SigninFirebase'; export default SigninFirebase; ``` 3. **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. 1. Configure your app [here](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-with-identity-pools.html) 2. Open the `src/@crema/services/auth/aws-cognito/aws-exports.js` file and update **awsConfig** for your app like below ```javascript 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', }; ``` 3. Update the AppAuthProvider component in the file `src/@crema/core/AppAuthProvider/index.js` like below. ```javascript 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 ( {children} ); }; AppAuthProvider.propTypes = { children: PropTypes.node, }; export default AppAuthProvider; ``` 4. Uncomment the AWS Auth method like below in the `src/@crema/hooks/AuthHooks.js` file ```javascript // 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, }; }; ``` 5. In the final step, we need to call the`` tag in the `src/modules/auth/Signin/index.js` file like below and do the same for **Signup**. ```javascript import SigninAwsCognito from './SigninAwsCognito'; export default SigninAwsCognito; ``` 4. **Auth0** Rapidly integrate *authentication* and authorization for web, mobile, and legacy applications*.* To integrate. Auth0 you need to follow the following steps. 1. Configure your app [here](https://auth0.com/docs/api) 2. Open the `src/@crema/services/auth/auth0/auth0Config.js` file and update Auth0Config for your app like below ```javascript const 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. ```javascript 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 {children}; }; 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 ```javascript //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}; }; ``` 5. In the final step, we need to call the **loginWithRedirect** method on the Login button. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cremawork.com/decelopment/authentication-methods.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.