Crema React
Search…
Authentication
Crema supports 4 types of authentication methods. Crema supports the following Methods
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
  1. 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
    To integrate JWT Auth you need to follow the following steps.
    1. 1.
      Open the src/@crema/services/auth/jwt-auth/index.js file and update baseURL of your server like below
      1
      const jwtAxios = axios.create({
      2
      baseURL: 'YOUR_API_URL HERE',
      3
      headers: {
      4
      'Content-Type': 'application/json',
      5
      },
      6
      });
      Copied!
    2. 2.
      Wrapp <AuthRoutes> with <JWTAuthProvider> Component in the src/pages/_app.js file like below.
      1
      const App = () => (
      2
      <AppContextProvider>
      3
      ...
      4
      <JWTAuthProvider> //Add the line
      5
      <AuthRoutes>
      6
      <CssBaseline />
      7
      <Component {...pageProps} />
      8
      </AuthRoutes>
      9
      </JWTAuthProvider>
      10
      ...
      11
      </AppContextProvider>
      12
      );
      13
      14
      export default App;
      Copied!
    3. 3.
      Uncomment the JWT Auth method like below in the src/@crema/utility/AuthHooks.js file
      1
      // ForJWT Auth
      2
      import {getUserFromJwtAuth} from './helper/AuthHelper';
      3
      import {
      4
      useJWTAuth,
      5
      useJWTAuthActions,
      6
      } from '../services/auth/jwt-auth/JWTAuthProvider';
      7
      8
      export const useAuthUser = () => {
      9
      const {user, isAuthenticated, isLoading} = useJWTAuth();
      10
      return {
      11
      isLoading,
      12
      isAuthenticated,
      13
      user: getUserFromJwtAuth(user),
      14
      };
      15
      };
      16
      17
      export const useAuthMethod = () => {
      18
      const {signInUser, signUpUser, logout} = useJWTAuthActions();
      19
      20
      return {
      21
      signInUser,
      22
      logout,
      23
      signUpUser,
      24
      };
      25
      };
      Copied!
    4. 4.
      In the final step, we need to call the<SigninJwtAuth> tag in the src/modules/auth/Signin/index.js file like below and do the same for Signup.
      1
      2
      const SignIn = () => {
      3
      return (
      4
      <Box>
      5
      ...
      6
      <SigninJwtAuth />
      7
      ...
      8
      </Box>
      9
      );
      10
      };
      11
      12
      export default SignIn;
      Copied!
  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.
      Open the src/@crema/services/auth/firebase/firebase.js file and update firebaseConfig for your app like below
      1
      const firebaseConfig = {
      2
      apiKey: 'XXXXXXXXXXXXXXXXXXX',
      3
      authDomain: 'XXXXXXXXXX.firebaseapp.com',
      4
      projectId: 'XXXXXXXXXX',
      5
      storageBucket: 'XXXXXXXXXX.appspot.com',
      6
      messagingSenderId: 'XXXXXXXXXX',
      7
      appId: '1:XXXXXXXXXX:web:XXXXXXXXXX',
      8
      measurementId: 'G-XXXXXXXXXX',
      9
      };
      Copied!
    2. 2.
      Wrapp <AuthRoutes> with <FirebaseAuthProvider> Component in the src/pages/_app.js file like below.
      1
      const App = () => (
      2
      <AppContextProvider>
      3
      ...
      4
      <FirebaseAuthProvider> //Add the line
      5
      <AuthRoutes>
      6
      <CssBaseline />
      7
      <Component {...pageProps} />
      8
      </AuthRoutes>
      9
      </FirebaseAuthProvider>
      10
      ...
      11
      </AppContextProvider>
      12
      );
      13
      14
      export default App;
      Copied!
    3. 3.
      Uncomment the Firebase Auth method like below in the src/@crema/utility/AuthHooks.js file
      1
      import {
      2
      useFirebase,
      3
      useFirebaseActions,
      4
      } from '../services/auth/firebase/FirebaseAuthProvider';
      5
      import {getUserFromFirebase} from './helper/AuthHelper';
      6
      7
      export const useAuthUser = () => {
      8
      const {user, isAuthenticated, isLoading} = useFirebase();
      9
      return {
      10
      isLoading,
      11
      isAuthenticated,
      12
      user: getUserFromFirebase(user),
      13
      };
      14
      };
      15
      16
      export const useAuthMethod = () => {
      17
      const {
      18
      signInWithEmailAndPassword,
      19
      createUserWithEmailAndPassword,
      20
      signInWithPopup,
      21
      logout,
      22
      } = useFirebaseActions();
      23
      24
      return {
      25
      signInWithEmailAndPassword,
      26
      createUserWithEmailAndPassword,
      27
      signInWithPopup,
      28
      logout,
      29
      };
      30
      };
      Copied!
    4. 4.
      In the final step, we need to call the<SigninFirebase> tag in the src/modules/auth/Signin/index.js file like below and do the same for Signup.
      1
      const SignIn = () => {
      2
      return (
      3
      <Box>
      4
      ...
      5
      <SigninFirebase />
      6
      ...
      7
      </Box>
      8
      );
      9
      };
      10
      11
      export default SignIn;
      Copied!
  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.
      Open the src/@crema/services/auth/aws-cognito/aws-exports.js file and update awsConfig for your app like below
      1
      2
      export const awsConfig = {
      3
      aws_project_region: 'us-east-1',
      4
      aws_cognito_identity_pool_id:
      5
      'us-east-1:XXXXXXXXXX,
      6
      aws_cognito_region: 'us-east-1',
      7
      aws_user_pools_id: 'us-east-XXXXXXXXXX',
      8
      aws_user_pools_web_client_id: 'XXXXXXXXXX',
      9
      oauth: {
      10
      domain: 'XXXXXXXXXX.auth.us-east-1.amazoncognito.com',
      11
      scope: [
      12
      'phone',
      13
      'email',
      14
      'openid',
      15
      'profile',
      16
      'aws.cognito.signin.user.admin',
      17
      ],
      18
      redirectSignIn: 'http://localhost:3000/',
      19
      redirectSignOut: 'http://localhost:3000/',
      20
      responseType: 'code',
      21
      },
      22
      federationTarget: 'COGNITO_USER_POOLS',
      23
      };
      24
      Copied!
    2. 2.
      Wrapp <AuthRoutes> with <AwsAuthProvider> Component in the src/pages/_app.js file like below.
      1
      const App = () => (
      2
      <AppContextProvider>
      3
      ...
      4
      <AwsAuthProvider> //Add the line
      5
      <AuthRoutes>
      6
      <CssBaseline />
      7
      <Component {...pageProps} />
      8
      </AuthRoutes>
      9
      </AwsAuthProvider>
      10
      ...
      11
      </AppContextProvider>
      12
      );
      13
      14
      export default App;
      Copied!
    3. 3.
      Uncomment the AWS Auth method like below in the src/@crema/utility/AuthHooks.js file
      1
      2
      import {getUserFromAWS} from './helper/AuthHelper';
      3
      import {
      4
      useAwsCognito,
      5
      useAwsCognitoActions,
      6
      } from '../services/auth/aws-cognito/AWSAuthProvider';
      7
      8
      export const useAuthUser = () => {
      9
      const {user, isAuthenticated, isLoading} = useAwsCognito();
      10
      return {
      11
      isLoading,
      12
      isAuthenticated,
      13
      user: getUserFromAWS(user),
      14
      };
      15
      };
      16
      17
      export const useAuthMethod = () => {
      18
      const {
      19
      signIn,
      20
      signUpCognitoUser,
      21
      confirmCognitoUserSignup,
      22
      logout,
      23
      } = useAwsCognitoActions();
      24
      25
      return {
      26
      signIn,
      27
      signUpCognitoUser,
      28
      confirmCognitoUserSignup,
      29
      logout,
      30
      };
      31
      };
      32
      Copied!
    4. 4.
      In the final step, we need to call the<SigninAwsCognito> tag in the src/modules/auth/Signin/index.js file like below and do the same for Signup.
      1
      const SignIn = () => {
      2
      return (
      3
      <Box>
      4
      ...
      5
      <SigninAwsCognito/>
      6
      ...
      7
      </Box>
      8
      );
      9
      };
      10
      11
      export default SignIn;
      Copied!
  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.
      Open the src/@crema/services/auth/auth0/auth0Config.js file and update Auth0Config for your app like below
      1
      const Auth0Config = async () => {
      2
      return await createAuth0Client({
      3
      client_id: 'XXXXXXXXXX',
      4
      domain: 'XXXXXXXXXX.auth0.com',
      5
      redirect_uri: 'XXXXXXXXXX',
      6
      audience: 'https://XXXXXXXXXX.auth0.com/userinfo',
      7
      });
      8
      };
      Copied!
    2. 2.
      Wrapp <AuthRoutes> with <Auth0Provider> Component in the src/pages/_app.js file like below.
      1
      const App = () => (
      2
      <AppContextProvider>
      3
      ...
      4
      <Auth0Provider> //Add the line
      5
      <AuthRoutes>
      6
      <CssBaseline />
      7
      <Component {...pageProps} />
      8
      </AuthRoutes>
      9
      </AwsAuthProvider>
      10
      ...
      11
      </Auth0Provider>
      12
      );
      13
      14
      export default App;
      Copied!
    3. 3.
      Uncomment the Auth0 Auth method like below in the src/@crema/utility/AuthHooks.js file
      1
      export const useAuthUser = () => {
      2
      const {user, isAuthenticated, isLoading} = useAuth0();
      3
      console.log(
      4
      'user, isAuthenticated, isLoading',
      5
      user,
      6
      isAuthenticated,
      7
      isLoading,
      8
      );
      9
      return {
      10
      isLoading,
      11
      isAuthenticated,
      12
      user: useMemo(() => getUserFromAuth0(user), []),
      13
      };
      14
      };
      15
      16
      export const useAuthMethod = () => {
      17
      const {loginWithRedirect, logout} = useAuth0();
      18
      19
      return loginWithRedirect;
      20
      };
      Copied!
    4. 4.
      In the final step, we need to call loginWithRedirect method on the Login button.
Copy link