# 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](https://docs.cremawork.com/v-4/decelopment/broken-reference)

   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 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 `libs/services/auth/src/jwt-auth/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 `apps/source/src/core/AppAuthProvider/index.js` like below.

      ```javascript
      const AppAuthProvider = ({children}) => {
        const {fetchStart, fetchSuccess, fetchError, showMessage} =
          useInfoViewActionsContext();

        return (
          <JWTAuthProvider
            fetchStart={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

      ```javascript
      // ForJWT Auth
      import { 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 the `apps/source/src/modules/auth/Signin/index.js` file like below and do the same for **Signup**.

      ```javascript
      import { SigninJwtAuth } from '@crema/modules/auth/SignIn';

      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 Authenticatio&#x6E;*.* 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 `libs/services/auth/src/firebase/firebase.js` file and update **firebaseConfig** for your app like 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 `apps/source/src/core/AppAuthProvider/index.js` like below.

      ```javascript
      const AppAuthProvider = ({children}) => {
        const {fetchStart, fetchSuccess, fetchError, showMessage} =
          useInfoViewActionsContext();

        return (
          <FirebaseAuthProvider
            fetchStart={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

      ```javascript
      //For Firebase Auth

      import {
        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 the `apps/source/src/modules/auth/Signin/index.js` file like below and do the same for **Signup**.

      ```javascript
      import { SigninFirebase } from '@crema/modules/auth/SignIn';

      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 easil&#x79;*.* 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 `libs/services/auth/src/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 `apps/source/src/core/AppAuthProvider/index.js` like below.

      ```javascript
      const AppAuthProvider = ({children}) => {
        const {fetchStart, fetchSuccess, fetchError, showMessage} =
          useInfoViewActionsContext();

        return (
          <AWSAuthProvider
            fetchStart={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

      ```javascript

      // For AWS Auth
      import {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 the `apps/source/src/modules/auth/Signin/index.js` file like below and do the same for **Signup**.

      ```javascript
      import { SigninAwsCognito } from '@crema/modules/auth/SignIn';

      export default SigninAwsCognito;
      ```

4. **Auth0**

   Rapidly integrate *authentication* and authorization for web, mobile, and legacy application&#x73;*.* To integrate. Auth0 you need to follow the following steps.

   1. Configure your app [here](https://auth0.com/docs/api)

   2. Open the `libs/services/auth/src/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
      const AppAuthProvider = ({children}) => {
        return <Auth0Provider>{children}</Auth0Provider>;
      };
      ```

   4. Wrap `<AuthRoutes`> with `<`AppAuthProvider `>` Component in the    `apps/source/`src/core/AppAuthProvider/index`.js` a file like below.

      ```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 **loginWithRedirect** method on the Login button.