New structure

apps/auth/src/main.ts

@@ -1,29 +1,23 @@
 import koa from 'koa';
-import router from "./routes";
+import router from './routes';
 import bodyParser from 'koa-bodyparser';
-import cors from "koa-cors"
-import jwtMiddleware from 'koa-jwt';
-
+import cors from 'koa-cors';
 
 const host = process.env.HOST ?? 'localhost';
 const port = process.env.PORT ? Number(process.env.PORT) : 8080;
-const secretKey = 'your-secret-key';
 
 const app = new koa();
-app.use(cors({
-  origin: '*',
-  credentials: true,
-  headers: ['Content-Type', 'Authorization'],
-  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
-}));
-app.use(jwtMiddleware({
-  secret: secretKey,
-  passthrough: true,
-}));
-app.use(bodyParser())
+app.use(
+  cors({
+    origin: '*',
+    credentials: true,
+    headers: ['Content-Type', 'Authorization'],
+    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+  })
+);
+app.use(bodyParser());
 app.use(router.routes()).use(router.allowedMethods());
 
 app.listen(port, host, () => {
   console.log(`[ ready ] http://${host}:${port}`);
 });
-

apps/auth/src/middlewares/index.ts

@@ -0,0 +1 @@
+export * from './jwt';

apps/auth/src/middlewares/jwt.ts

@@ -0,0 +1,6 @@
+import koaJwt from 'koa-jwt';
+import { jwtSecret } from '../utils';
+
+export const jwtVal = koaJwt({
+  secret: jwtSecret, // Should not be hardcoded
+});

apps/auth/src/routes.ts

@@ -1,40 +1,44 @@
 import koaRouter from 'koa-router';
-import crypto from 'crypto';
 import jwt from 'jsonwebtoken';
+import { generateOTP, sendOTPEmail } from '@onboarding/otp/feature';
+import { jwtSecret } from './utils';
+import { jwtVal } from './middlewares/index';
 
 const router = new koaRouter();
 
 router.get('hello', '/', (ctx) => {
   ctx.body = '<h1>Hello</h1>';
 });
 
+router.get('/data', jwtVal, async (ctx) => {
+  ctx.body = '<h1>hh</h1>';
+});
+
 router.post('/otp/generate', async (ctx, next) => {
-  const otp = crypto.randomBytes(2).toString('hex');
-  const email = ctx.request.body;
+  const otp = generateOTP(2);
+  const { email } = ctx.request.body;
 
-  ctx.app.user = { email: email.email, otp };
+  ctx.app.user = { email: email, otp }; //save temporally in memory
 
-  ctx.body = { otp };
+  await sendOTPEmail(email, otp);
+  ctx.body = { message: 'OTP sent to your email' };
 
   next();
 });
 
 router.post('/otp/verify', async (ctx, next) => {
   const { otp: userOtp, email } = ctx.request.body;
-  console.log('users', ctx.app.user);
-
   const storedOtp = ctx.app.user?.otp ?? ''; // retrieve stored OTP
 
   if (userOtp === storedOtp) {
-    const token = jwt.sign({ user: email }, 'your-secret-key', {
+    const token = jwt.sign({ user: email }, jwtSecret, {
       expiresIn: '1h',
     });
     ctx.body = { token };
   } else {
     ctx.status = 401;
     ctx.body = { error: 'Invalid OTP' };
   }
-
   next();
 });
 

apps/auth/src/utils/config.ts

@@ -0,0 +1 @@
+export const jwtSecret = 'n6dHKHspDp';

apps/auth/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './config';

apps/login-ui/src/app/AppRoutes.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import App from './App';
+import { Route } from '@onboarding/router/data';
+import { CustomRouter } from '@onboarding/router/feature';
+import { OtpPageAuth } from '@onboarding/otp-ui/feature';
+
+const routes: Route[] = [
+  {
+    path: '/',
+    element: <App />,
+  },
+  {
+    path: '/login',
+    element: <OtpPageAuth />,
+  },
+];
+
+const AppRoutes: React.FC = () => {
+  return <CustomRouter routes={routes} />;
+};
+
+export default AppRoutes;

apps/login-ui/src/app/AppStarter.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material';
 import { theme } from '@onboarding/themes';
-import App from './App';
 import { I18nProvider } from '@onboarding/i18n/feature';
+import { ReactQueryProvider } from '@onboarding/react-query/feature';
+import AppRoutes from './AppRoutes';
+import { AuthenticationProvider } from '@onboarding/otp-ui/feature';
 
 const translations = {
   //cant import of external file. eslint error
@@ -22,7 +24,11 @@ export const AppStarter: React.FC<Props> = () => {
   const children = (
     <ThemeProvider theme={theme}>
       <I18nProvider translations={translations} locale={locale}>
-        <App />
+        <ReactQueryProvider>
+          <AuthenticationProvider>
+            <AppRoutes />
+          </AuthenticationProvider>
+        </ReactQueryProvider>
       </I18nProvider>
     </ThemeProvider>
   );

libs/i18n/data/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "data",
+  "name": "data-i18n",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/i18n/data/src",
   "projectType": "library",

libs/i18n/feature/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "feature",
+  "name": "feature-i18n",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/i18n/feature/src",
   "projectType": "library",

libs/otp-ui/feature/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "pure": true,
+        "ssr": true
+      }
+    ]
+  ]
+}

libs/otp-ui/feature/README.md

@@ -0,0 +1,7 @@
+# feature
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test feature` to execute the unit tests via [Vitest](https://vitest.dev/).

apps/otp/eslint.config.js → libs/otp-ui/feature/eslint.config.js

@@ -1,5 +1,5 @@
 const nx = require('@nx/eslint-plugin');
-const baseConfig = require('../../eslint.config.js');
+const baseConfig = require('../../../eslint.config.js');
 
 module.exports = [
   ...baseConfig,