revise auth

Author: VasilyStrelyaev

packages/devextreme-cli/src/applications/application.nextjs.js

@@ -36,7 +36,7 @@ const isTsApp = () => {
 };
 
 const getExtension = (appPath) => {
-    return fs.existsSync(path.join(appPath, 'src/app', 'page.tsx')) ? '.tsx' : '.jsx';
+    return fs.existsSync(path.join(appPath, 'src/app', 'layout.tsx')) ? '.tsx' : '.jsx';
 };
 
 const pathToPagesIndex = () => {
@@ -47,6 +47,7 @@ const pathToPagesIndex = () => {
 const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
+        { name: 'jose', version: latestVersions['jose'] },
     ];
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
@@ -74,20 +75,15 @@ const create = async(appName, options) => {
     commandArguments = [
         ...commandArguments,
         `${templateOptions.isTypeScript ? '--typescript' : '--javascript'}`,
-        '--eslint',
-        '--no-tailwind',
-        '--src-dir',
-        '--app',
-        '--no-turbopack',
-        '--import-alias "@/*"'
+        '--yes',
     ];
 
     await runCommand('npx', commandArguments);
 
     const appPath = path.join(process.cwd(), appName);
 
     if(depsVersionTag) {
-        bumpReact(appPath, depsVersionTag);
+        bumpReact(appPath, depsVersionTag, templateOptions.isTypeScript);
     }
 
     addTemplate(appPath, appName, templateOptions);

packages/devextreme-cli/src/applications/application.react.js

@@ -52,14 +52,19 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
-const bumpReact = (appPath, versionTag) => {
+const bumpReact = (appPath, versionTag, isTypeScript) => {
     const dependencies = [
         { name: 'react', version: versionTag },
         { name: 'react-dom', version: versionTag },
-        { name: '@types/react', version: versionTag, dev: true },
-        { name: '@types/react-dom', version: versionTag, dev: true },
     ];
 
+    if(isTypeScript) {
+        dependencies.push(
+            { name: '@types/react', version: versionTag, dev: true },
+            { name: '@types/react-dom', version: versionTag, dev: true },
+        );
+    }
+
     packageJsonUtils.addDependencies(appPath, dependencies);
 };
 
@@ -86,7 +91,7 @@ const create = async(appName, options) => {
     modifyIndexHtml(appPath, templateOptions.project);
 
     if(depsVersionTag) {
-        bumpReact(appPath, depsVersionTag);
+        bumpReact(appPath, depsVersionTag, templateOptions.isTypeScript);
     }
 
     addTemplate(appPath, appName, templateOptions);

packages/devextreme-cli/src/templates/nextjs/application/.env

@@ -0,0 +1 @@
+SESSION_SECRET=<your_secret_key_goes_here>

packages/devextreme-cli/src/templates/nextjs/application/src/api/auth.tsx

@@ -0,0 +1,33 @@
+'use server'
+import { redirect } from 'next/navigation'
+import defaultUser from '@/utils/default-user';
+import { createSession, deleteSession } from '@/app/lib/session'
+
+export async function signUp(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  // Create a user in the database
+  console.log(email, password);
+
+  await signIn(email, password);
+}
+
+export async function signIn(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  // Verify that a user exists
+  console.log(email, password);
+
+  await createSession(defaultUser.id);
+}
+
+export async function signOut() {
+  await deleteSession();
+  redirect('/login');
+}
+
+export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>, recoveryCode?<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  // Verify the recovery code
+  console.log(email, recoveryCode);
+}
+
+export async function resetPassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  // Reset password
+  console.log(email);
+}

packages/devextreme-cli/src/templates/nextjs/application/src/app/actions/auth.ts

@@ -1,30 +1,15 @@
-'use client'
-<%=#isTypeScript%>import { PropsWithChildren } from 'react';<%=/isTypeScript%>
-import LoadPanel from 'devextreme-react/load-panel';
-import { AuthProvider, useAuth } from '@/contexts/auth';
-import { ThemeProvider } from "@/theme";
-
-function Page({ children }<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
-  const { loading } = useAuth();
-
-  if (loading) {
-    return <LoadPanel visible={true} />;
-  }
-
-  return children;
-}
+<%=#isTypeScript%>import type { PropsWithChildren } from 'react';
+<%=/isTypeScript%>import { ThemeProvider } from "@/theme";
 
 export default function RootLayout({ children }<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
   return (
     <html lang="en">
     <title>NextJs Dx App</title>
       <body className="dx-viewport">
         <ThemeProvider>
-          <AuthProvider>
-            <div className='app'>
-              <Page>{children}</Page>
-            </div>
-          </AuthProvider>
+          <div className='app'>
+            {children}
+          </div>
         </ThemeProvider>
       </body>
     </html>

packages/devextreme-cli/src/templates/nextjs/application/src/app/layout.tsx

@@ -0,0 +1,47 @@
+import 'server-only';
+import { SignJWT, jwtVerify } from 'jose';
+import { cookies } from 'next/headers';
+<%=#isTypeScript%>import type { SessionPayload } from '@/types';
+<%=/isTypeScript%>
+const secretKey = process.env.SESSION_SECRET;
+const encoder = new TextEncoder();
+const encodedKey = encoder.encode(secretKey);
+
+export async function encrypt(payload<%=#isTypeScript%>: SessionPayload<%=/isTypeScript%>) {
+  return new SignJWT(payload)
+    .setProtectedHeader({ alg: 'HS256' })
+    .setIssuedAt()
+    .setExpirationTime('7d')
+    .sign(encodedKey);
+}
+ 
+export async function decrypt(session<%=#isTypeScript%>: string | undefined = ''<%=/isTypeScript%>) {
+  try {
+    const { payload } = await jwtVerify(session, encodedKey, {
+      algorithms: ['HS256'],
+    });
+
+    return payload;
+  } catch (error) {
+    console.log('Failed to verify session');
+  }
+}
+
+export async function createSession(userId<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+  const session = await encrypt({ userId, expiresAt });
+  const cookieStore = await cookies();
+ 
+  cookieStore.set('session', session, {
+    httpOnly: true,
+    secure: true,
+    expires: expiresAt,
+    sameSite: 'lax',
+    path: '/',
+  });
+}
+
+export async function deleteSession() {
+  const cookieStore = await cookies();
+  cookieStore.delete('session');
+}

packages/devextreme-cli/src/templates/nextjs/application/src/app/lib/session.ts

@@ -1,21 +1,9 @@
-'use client'
-import {<%=#isTypeScript%> PropsWithChildren,<%=/isTypeScript%> useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { useAuth } from '@/contexts/auth';
-import appInfo from '@/app-info';
+<%=#isTypeScript%>import type { PropsWithChildren } from 'react';
+<%=/isTypeScript%>import appInfo from '@/app-info';
 import { Footer } from '@/components';
 import { <%=layout%> as SideNavBarLayout } from '@/layouts';
 
 export default function Content({children}<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
-  const { user, loading } = useAuth();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!loading && !user) {
-      router.push('/login');
-    }
-  }, [user, loading, router]);
-
   return (
     <SideNavBarLayout title={appInfo.title}>
       {children}

packages/devextreme-cli/src/templates/nextjs/application/src/app/pages/layout.tsx

@@ -13,7 +13,7 @@ import Form, {
 } from 'devextreme-react/form';
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
-import { createAccount } from '../../api/auth';
+import { signUp } from '@/app/actions/auth';
 <%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
 import './CreateAccountForm.scss';
 
@@ -27,7 +27,7 @@ export default function CreateAccountForm() {
     const { email, password } = formData.current;
     setLoading(true);
 
-    const result = await createAccount(email, password);
+    const result = await signUp(email, password);
     setLoading(false);
 
     if (result.isOk) {

packages/devextreme-cli/src/templates/nextjs/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -1,10 +1,10 @@
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import Button from 'devextreme-react/button';
-import UserPanel from '../user-panel/UserPanel';
+import UserPanel from '@/components/user-panel/UserPanel';
 import './Header.scss';
 import { Template } from 'devextreme-react/core/template';
-import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
-<%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
+import { ThemeSwitcher } from '@/components/theme-switcher/ThemeSwitcher';
+<%=#isTypeScript%>import type { HeaderProps } from '@/types';<%=/isTypeScript%>
 
 export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
   return (