Crema React
v-4
Search…
⌃K

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"
  1. 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
    To integrate JWT Auth you need to follow the following steps.
    1. 1.
      Open the libs/services/auth/src/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. 2.
      Set header token in the axios, go to the file libs/services/auth/src/jwt-auth/index.js and change the
      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. 3.
      Wrap <AuthRoutes> with <JWTAuthProvider> Component in the apps/source/src/app.js a file like below.
      import JWTAuthProvider from '@crema/services/auth/JWTAuthProvider';
      const App = () => (
      <AppContextProvider>
      ...
      <JWTAuthProvider> //Add the line
      <AuthRoutes>
      <CssBaseline />
      <AppLayout />
      </AuthRoutes>
      </JWTAuthProvider>
      ...
      </AppContextProvider>
      );
      export default App;
    4. 4.
      Uncomment the JWT Auth method like below in the libs/hooks/src/AuthHooks.js file
      // 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. 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.
      import { SigninJwtAuth } from '@crema/modules/auth/SignIn';
      export default SigninJwtAuth;
  2. 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. 1.
      Configure your app here
    2. 2.
      Open the libs/services/auth/src/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',
      };
    3. 3.
      Wrap <AuthRoutes> with <FirebaseAuthProvider> Component in the apps/source/src/app.js file like below.
      const App = () => (
      <AppContextProvider>
      ...
      <FirebaseAuthProvider> //Add the line
      <AuthRoutes>
      <CssBaseline />
      <AppLayout />
      </AuthRoutes>
      </FirebaseAuthProvider>
      ...
      </AppContextProvider>
      );
      export default App;
    4. 4.
      Uncomment the Firebase Auth method like below in the libs/hooks/src/AuthHooks.js file
      //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. 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.
      import { SigninFirebase } from '@crema/modules/auth/SignIn';
      export default SigninFirebase;
  3. 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. 1.
      Configure your app here
    2. 2.
      Open the libs/services/auth/src/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',
      };
    3. 3.
      Wrap <AuthRoutes> with <AwsAuthProvider> Component in the apps/source/src/app.js file like below.
      import AwsAuthProvider from "@crema/services/auth/AWSAuthProvider";
      const App = () => (
      <AppContextProvider>
      ...
      <AwsAuthProvider> //Add the line
      <AuthRoutes>
      <CssBaseline />
      <AppLayout />
      </AuthRoutes>
      </AwsAuthProvider>
      ...
      </AppContextProvider>
      );
      export default App;
    4. 4.
      Uncomment the AWS Auth method like below in the libs/hooks/src/AuthHooks.js file
      // 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. 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.
      import { SigninAwsCognito } from '@crema/modules/auth/SignIn';
      export default SigninAwsCognito;
  4. 4.
    Auth0
    Rapidly integrate authentication and authorization for web, mobile, and legacy applications. To integrate. Auth0 you need to follow the following steps.
    1. 1.
      Configure your app here
    2. 2.
      Open the libs/services/auth/src/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',
      });
      };
    3. 3.
      Wrap <AuthRoutes> with <Auth0Provider> Component in the apps/source/src/app.js file like below.
      ....
      import Auth0Provider from "@crema/services/auth/Auth0Provider";
      const App = () => (
      <AppContextProvider>
      ...
      <Auth0Provider> //Add the line
      <AuthRoutes>
      <CssBaseline />
      <AppLayout />
      </AuthRoutes>
      </AwsAuthProvider>
      ...
      </Auth0Provider>
      );
      export default App;
    4. 4.
      Uncomment the Auth0 Auth method like the below in the libs/hooks/src/AuthHooks.js file
      //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. 5.
      In the final step, we need to call loginWithRedirect method on the Login button.