Installation of Login Feature

npm install react-router-dom npm install @heroicons/react npm install @headlessui/react npm install lucide-react

For the account dropdown: npm install framer-motion

npm install -D tailwindcss@3.4 postcss autoprefixer

generate config files npx tailwindcss init -p Problems? Potential issues are tailwind version mismatch and pr node gets polluted. rm -rf node_modules package-lock.json npm install npm run dev

switch node: needs nvm installed nvm use 22

Files required

The setup required for this feature is a top level loader with a spinner. We copy over the below folders.
/features/auth /ui/loader /config /context

tailwind.config.js copy over postcss.config.js

adjust the css files associated with tailwind. index.css contains the directives. App.css contains the root level pages design and may require adjustments depending on your applications design and needs. Applying the feature into a fresh install tests installation processes. There may be some app level specifics that need to be adjusted following the destination app.

{: note} If the pages load but the design is not clean it is usually the lack of a proper tailwind installation. See the "Problems" under the inital install of tailwind.

Files Adjusted

We need to update some files within the pre-existing app to integrate with. The default requires AuthProvider around the app so that the App knows about the login urls and allow based on authentication.

Open Main.jsx or App.jsx

main.jsx

import {AuthProvider} from "./features/auth/context/AuthContext.jsx";
import { LoadingProvider } from './context/LoadingContext';
import GlobalSpinner from './ui/loaders/GlobalSpinner';

createRoot(document.getElementById('root')).render(
  <StrictMode>    
    <LoadingProvider>
      <GlobalSpinner />
      <AuthProvider>
        <App />
      </AuthProvider>
    </LoadingProvider>
  </StrictMode>,
)

We need to add either to a router to the App App.jsx:

import AppRouter from "./Router"; //import your Router file.jsx


function App() {

  return (
    <BrowserRouter>
        <AppRouter />
    </BrowserRouter>
  )
}

Add the Loader, GlobalSpinner, AuthProvider in the main.jsx or the App.jsx depending on your app. In the case of our original build, these components are split between both files. Loader/GlobalSpinner in main.js and AuthProvider wrapping the AppLayout with the Authentication. Either works.

Open .env.example and save as .env and or .env.development and adjust the domain endpoint to the Api. This particular example uses the php-auth api found in github php auth app as its example, however a future enhancement will test with a base java api endpoint.

.env.example .env.development .env