Authentication

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.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.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.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.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.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.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
​
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.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.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.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.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
​
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.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.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.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.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
​
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.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.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.In the final step, we need to call loginWithRedirect method on the Login button.
Last modified 4mo ago
Copy link