Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How you can use withAuth #3

Open
MadalinNitu opened this issue Oct 2, 2021 · 4 comments
Open

How you can use withAuth #3

MadalinNitu opened this issue Oct 2, 2021 · 4 comments

Comments

@MadalinNitu
Copy link

How to use properly withAuth for authorize Home feature?

@thaind97git
Copy link
Owner

thaind97git commented Oct 3, 2021

Hi @MadalinNitu , welcome to my project.
Sorry about withAuth feature. This is an old feature, and I have not complete this. But I have already public a new Auth to support build an admin side.
You can check the new release.

at src/layouts/main/index.tsx line 50, using the code inside comment like this:

<Route
    key={path}
    path={path}
    render={props => {
       updateDisplayLayout(currentLayout, layout);
       return (
           <Auth>
               <Component {...props} />
          </Auth>
       );
    }}
    {...rest}
/>

@MadalinNitu
Copy link
Author

MadalinNitu commented Oct 3, 2021

Hi .. thank you very much for your work here.

I manage to use the hoc function for authorization for a new feature with the following procedures ...

import { verifyToken } from '@/store/actions/auth';
import { selectCurrentUser } from '@/store/slices/authSlice';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const Empty = () => <div />;

const withAuth: CallableFunction = (AuthComponent: React.FC) => {
  const AuthenHOC: React.FC = () => {
    const dispatch = useDispatch();
    const currentUser = useSelector(selectCurrentUser);

    useEffect(() => {
      dispatch(verifyToken());
    }, [dispatch]);

    return currentUser ? <AuthComponent /> : <Empty />;
  };

  return AuthenHOC;
};

export default withAuth;

and in a test feature class I export the following

import React from 'react';

import withAuth from '@/components/hoc/withAuth'

const Test: React.FC = () => {
  return (
    <div className="test">
      <h1>Test</h1>
    </div>
  );
};

export default withAuth(Test);

and enforce the login only for a feature page not for all.

Maybe you have to move the Auth.ts in another directory for been more accessible?

thanks a lot 👍

@thaind97git
Copy link
Owner

Yeah, You are correct about using this feature!
withAuth is a feature that I used inside nextjs project to authorize by each page. But for this project, I want to use another approach by using Wrapper Component to support the admin side.
Thanks a lot, I will improve the code later.

@MadalinNitu
Copy link
Author

Thanks,

I want to add a console feature like aws or gcp platform. In that way we can split de asmin users from clients users and let permissions for different features.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants