How to add ACL in starter-kit

Currently, we are showing the way where you just have to Copy Files / Folders from the full version to get the Auth and ACL working but in future we will make this process more smooth.

Copy Router file src/router/Router.js from full version and replace it with the one in starter kit at the same path in starter kit folder.

Update following imports according to your current paths:

const NotAuthorized = lazy(() => import('@src/views/pages/misc/NotAuthorized'))
// ** Init Error Component
const Error = lazy(() => import('@src/views/pages/misc/Error'))

If you have not moved those files

const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'))
// ** Init Error Component
const Error = lazy(() => import('@src/views/Error'))

The main difference between those two router files is FinalRoute function which is enabled in the Full version and which is also responsible to check the Authentication and implement ACL while visiting any route.

You only have to copy two files from full-version to starter-kit. Navigate to src/@core/layouts/menu and vertical-menu/VerticalNavMenuItems.js or if you're using horizontal-menu/HorizontalNavMenuItems.js

Copy acl folder found at src/configs/acl and paste it in the starter at path src/configs.

Import Ability Context in src/index.js and wrap your <LazyApp /> with it.

// ** Initial ability & context
import ability from './configs/acl/ability'
import { AbilityContext } from './utility/context/Can'
// ** Lazy load app
const LazyApp = lazy(() => import('./App'))
ReactDOM.render(
<Provider store={store}>
<Suspense fallback={<Spinner />}>
<AbilityContext.Provider value={ability}>
<ThemeContext>
<LazyApp />
<ToastContainer newestOnTop />
</ThemeContext>
</AbilityContext.Provider>
</Suspense>
</Provider>,
document.getElementById('root')
)

Now when a user login you'll have to update their ability. You can do that using ability context like shown in below example.

import { useContext } from 'react'
import useJwt from '@src/auth/jwt/useJwt'
import { AbilityContext } from '@src/utility/context/Can'
const LoginForm = () => {
const ability = useContext(AbilityContext)
const handleSubmit = (event, errors) => {
if (errors && !errors.length) {
useJwt
.login({ email, password })
.then(res => ability.update(res.data.userData.ability))
.catch(err => console.log(err))
}
}
return <form onSubmit={handleSubmit}>...</form>
}

You can learn about how ACL works here

How to add i18n in starter kit

Steps#

Follow below mentioned steps to add internationalization in starter-kit:

  • First step is to add the text to translate in src/assets/data/locales

fr.json
{
"Dashboard": "Tableau de bord"
}
  • Add Intl Context in src/index.js.

    Import your wrapper as shown below and wrap your app with it.

// ** Import Intl Context
import { IntlProviderWrapper } from './utility/context/Internationalization'
// ** Lazy load app
const LazyApp = lazy(() => import('./App'))
ReactDOM.render(
<Provider store={store}>
<Suspense fallback={<Spinner />}>
<ThemeContext>
<IntlProviderWrapper>
<LazyApp />
<ToastContainer newestOnTop />
</IntlProviderWrapper>
</ThemeContext>
</Suspense>
</Provider>,
document.getElementById('root')
)
  • You can now use switchLanguage from anywhere in your app to change language.

// ** React Imports
import { useContext } from 'react'
// ** Internationalization Context
import { IntlContext } from '@src/utility/context/Internationalization'
const Component = () => {
return <Button onClick={() => intlContext.switchLanguage('fr')}>Change Language</Button>
}
  • Now only thing remains is to display changed language text.

// ** Component to render changed language text.
import { FormattedMessage } from 'react-intl'
const Component = () => {
// ** Id is the text in your json files.
return <FormattedMessage id='Colors' />
}

Adding Intl in sidebar#

Please follow these steps to add intl in sidebar:

  • Add your menu translations in src/assets/data/locale
  • Navigate to src/@core/layouts/components/menu
  • Copy vertical-menu/VerticalNavMenuLink.js & vertical-menu/VerticalNavMenuGroup.js & replace these files in starter-kit in the path same as first step.
  • Copy horizontal-menu/HorizontalNavMenuLink.js & horizontal-menu/HorizontalNavMenuGroup.js & replace these files in starter-kit in the path same as first step.

Full Example#

// ** React Imports
import { useContext } from 'react'
// ** Component to render changed language text.
import { FormattedMessage } from 'react-intl'
// ** Internationalization Context
import { IntlContext } from '@src/utility/context/Internationalization'
// ** Reactstrap Components
import { Button, Card, CardHeader, CardBody, CardTitle } from 'reactstrap'
const Home = () => {
// ** Context
const intlContext = useContext(IntlContext)
// ** Function to switch Language
const handleLangUpdate = lang => {
intlContext.switchLanguage(lang)
}
return (
<Card>
<CardHeader>
<CardTitle>Kick start your project 🚀</CardTitle>
</CardHeader>
<CardBody>
<p>
<FormattedMessage id='Colors' />
</p>
<Button className='mr-1' color='primary' onClick={() => handleLangUpdate('en')}>
En
</Button>
<Button className='mr-1' color='primary' onClick={() => handleLangUpdate('fr')}>
Fr
</Button>
<Button className='mr-1' color='primary' onClick={() => handleLangUpdate('de')}>
De
</Button>
<Button color='primary' onClick={() => handleLangUpdate('pt')}>
Pt
</Button>
</CardBody>
</Card>
)
}
export default Home

How to add JWT in starter kit

Using JWT is easy. We have provided JWT folder for developers usage in full version src/auth/jwt copy that folder paste it in starter-kit.

Now all you have to do is using it's jwt service:

import useJwt from '@src/auth/jwt/useJwt'
const LoginForm = () => {
const handleSubmit = () => {
useJwt
.login({
email: userEmail,
password: userPassword
})
.then(() => {
// Do something on success
})
.catch(() => {
// Do something on error
})
}
return <Form onSubmit={handleSubmit}>...</Form>
}

This is same for register. You can use JWT helper methods like setToken as well.

Certainly, if you have any configuration regrading JWT then you might have to modify it a little bit. Please check our docs on authentication.