> For the complete documentation index, see [llms.txt](https://docs.cremawork.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cremawork.com/v-3/next-js/authentication.md). # Authentication Crema supports 4 types of authentication methods. Crema supports the following Methods. In the app, if you need authenticated user, then you need to check [here ](/v-3/development/auth-user.md) 1. **JWT Auth** JSON Web Token is a proposed Internet standard for creating data with an optional signature. Crema demo is linked with the Mongoose server. You can find our predefined APIs [here](/v-3/servers/mongoose.md) 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 below ``` const jwtAxios = axios.create({ baseURL: 'YOUR_API_URL HERE', headers: { 'Content-Type': 'application/json', }, }); ``` 2. Wrapp ` with `` Component in the `src/pages/_app.js` file like below. ``` const App = () => ( ... //Add the line ... ); export default App; ``` 3. Uncomment the JWT Auth method like below in the `src/@crema/utility/AuthHooks.js` file ``` // ForJWT Auth import {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, }; }; ``` 4. 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**. ``` const SignIn = () => { return ( ... ... ); }; export default SignIn; ``` 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. Open the `src/@crema/services/auth/firebase/firebase.js` file and update **firebaseConfig** for your app like below ``` const firebaseConfig = { apiKey: 'XXXXXXXXXXXXXXXXXXX', authDomain: 'XXXXXXXXXX.firebaseapp.com', projectId: 'XXXXXXXXXX', storageBucket: 'XXXXXXXXXX.appspot.com', messagingSenderId: 'XXXXXXXXXX', appId: '1:XXXXXXXXXX:web:XXXXXXXXXX', measurementId: 'G-XXXXXXXXXX', }; ``` 2. Wrapp ` with `` Component in the `src/pages/_app.js` file like below. ``` const App = () => ( ... //Add the line ... ); export default App; ``` 3. Uncomment the Firebase Auth method like below in the `src/@crema/utility/AuthHooks.js` file ``` import { 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, }; }; ``` 4. 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**. ``` const SignIn = () => { return ( ... ... ); }; export default SignIn; ``` 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. Open the `src/@crema/services/auth/aws-cognito/aws-exports.js` file and update **awsConfig** for your app like below ``` 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', }; ``` 2. Wrapp ` with `` Component in the `src/pages/_app.js` file like below. ``` const App = () => ( ... //Add the line ... ); export default App; ``` 3. Uncomment the AWS Auth method like below in the `src/@crema/utility/AuthHooks.js` file ``` import {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, }; }; ``` 4. 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**. ``` const SignIn = () => { return ( ... ... ); }; export default SignIn; ``` 4. **Auth0** Rapidly integrate *authentication* and authorization for web, mobile, and legacy applications*.* To integrate. Auth0 you need to follow the following steps. 1. Open the `src/@crema/services/auth/auth0/auth0Config.js` file and update Auth0Config for your app like below ``` const Auth0Config = async () => { return await createAuth0Client({ client_id: 'XXXXXXXXXX', domain: 'XXXXXXXXXX.auth0.com', redirect_uri: 'XXXXXXXXXX', audience: 'https://XXXXXXXXXX.auth0.com/userinfo', }); }; ``` 2. Wrapp ` with `` Component in the `src/pages/_app.js` file like below. ``` const App = () => ( ... //Add the line ... ); export default App; ``` 3. Uncomment the Auth0 Auth method like below in the `src/@crema/utility/AuthHooks.js` file ``` export 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; }; ``` 4. In the final step, we need to call **loginWithRedirect** method on the Login button.