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