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
​
const jwtAxios = axios.create({
  baseURL: 'YOUR_API_URL HERE',
  headers: {
    'Content-Type': 'application/json',
  },
});
​
2.Wrapp <AuthRoutes> with <JWTAuthProvider> Component in the src/pages/_app.js file like below.
​
const App = () => (
  <AppContextProvider>
    ...
    <JWTAuthProvider> //Add the line
      <AuthRoutes>
        <CssBaseline />
        <Component {...pageProps} />
      </AuthRoutes>
    </JWTAuthProvider>
    ...
  </AppContextProvider>
);
​
export default App;
​
3.Uncomment the JWT Auth method like below in the src/@crema/utility/AuthHooks.js file
​
// ForJWT Auth
import {getUserFromJwtAuth} from './helper/AuthHelper';
import {
  useJWTAuth,
  useJWTAuthActions,
} from '../services/auth/jwt-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,
  };
};
​
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.
​
​
const SignIn = () => {
  return (
    <Box>
      ...
      <SigninJwtAuth />
      ...
    </Box>
  );
};
​
export default SignIn;
​
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
​
const firebaseConfig = {
  apiKey: 'XXXXXXXXXXXXXXXXXXX',
  authDomain: 'XXXXXXXXXX.firebaseapp.com',
  projectId: 'XXXXXXXXXX',
  storageBucket: 'XXXXXXXXXX.appspot.com',
  messagingSenderId: 'XXXXXXXXXX',
  appId: '1:XXXXXXXXXX:web:XXXXXXXXXX',
  measurementId: 'G-XXXXXXXXXX',
};
​
2.Wrapp <AuthRoutes> with <FirebaseAuthProvider> Component in the src/pages/_app.js file like below.
​
const App = () => (
  <AppContextProvider>
    ...
    <FirebaseAuthProvider> //Add the line
      <AuthRoutes>
        <CssBaseline />
        <Component {...pageProps} />
      </AuthRoutes>
    </FirebaseAuthProvider>
    ...
  </AppContextProvider>
);
​
export default App;
​
3.Uncomment the Firebase Auth method like below in the src/@crema/utility/AuthHooks.js file
​
import {
  useFirebase,
  useFirebaseActions,
} from '../services/auth/firebase/FirebaseAuthProvider';
import {getUserFromFirebase} from './helper/AuthHelper';
​
export const useAuthUser = () => {
  const {user, isAuthenticated, isLoading} = useFirebase();
  return {
    isLoading,
    isAuthenticated,
    user: getUserFromFirebase(user),
  };
};
​
export const useAuthMethod = () => {
  const {
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
    signInWithPopup,
    logout,
  } = useFirebaseActions();
​
  return {
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
    signInWithPopup,
    logout,
  };
};
​
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.
​
const SignIn = () => {
  return (
    <Box>
      ...
      <SigninFirebase />
      ...
    </Box>
  );
};
​
export default SignIn;
​
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
​
​
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',
};
​
​
2.Wrapp <AuthRoutes> with <AwsAuthProvider> Component in the src/pages/_app.js file like below.
​
const App = () => (
  <AppContextProvider>
    ...
    <AwsAuthProvider> //Add the line
      <AuthRoutes>
        <CssBaseline />
        <Component {...pageProps} />
      </AuthRoutes>
    </AwsAuthProvider>
    ...
  </AppContextProvider>
);
​
export default App;
​
3.Uncomment the AWS Auth method like below in the src/@crema/utility/AuthHooks.js file
​
​
import {getUserFromAWS} from './helper/AuthHelper';
import {
  useAwsCognito,
  useAwsCognitoActions,
} from '../services/auth/aws-cognito/AWSAuthProvider';
​
export const useAuthUser = () => {
  const {user, isAuthenticated, isLoading} = useAwsCognito();
  return {
    isLoading,
    isAuthenticated,
    user: getUserFromAWS(user),
  };
};
​
export const useAuthMethod = () => {
  const {
    signIn,
    signUpCognitoUser,
    confirmCognitoUserSignup,
    logout,
  } = useAwsCognitoActions();
​
  return {
    signIn,
    signUpCognitoUser,
    confirmCognitoUserSignup,
    logout,
  };
};
​
​
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.
​
const SignIn = () => {
  return (
    <Box>
      ...
      <SigninAwsCognito/>
      ...
    </Box>
  );
};
​
export default SignIn;
​
​
​
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
​
const Auth0Config = async () => {
  return await createAuth0Client({
    client_id: 'XXXXXXXXXX',
    domain: 'XXXXXXXXXX.auth0.com',
    redirect_uri: 'XXXXXXXXXX',
    audience: 'https://XXXXXXXXXX.auth0.com/userinfo',
  });
};
​
2.Wrapp <AuthRoutes> with <Auth0Provider> Component in the src/pages/_app.js file like below.
​
const App = () => (
  <AppContextProvider>
    ...
    <Auth0Provider> //Add the line
      <AuthRoutes>
        <CssBaseline />
        <Component {...pageProps} />
      </AuthRoutes>
    </AwsAuthProvider>
    ...
  </Auth0Provider>
);
​
export default App;
​
3.Uncomment the Auth0 Auth method like below in the src/@crema/utility/AuthHooks.js file
​
export const useAuthUser = () => {
  const {user, isAuthenticated, isLoading} = useAuth0();
  console.log(
    'user, isAuthenticated, isLoading',
    user,
    isAuthenticated,
    isLoading,
  );
  return {
    isLoading,
    isAuthenticated,
    user: useMemo(() => getUserFromAuth0(user), []),
  };
};
​
export const useAuthMethod = () => {
  const {loginWithRedirect, logout} = useAuth0();
​
  return loginWithRedirect;
};
​
4.In the final step, we need to call loginWithRedirect method on the Login button.
Last modified 7mo ago
Copy link