diff --git a/nextjs@latest-auth-withouterrors/.eslintrc.json b/nextjs@latest-auth-withouterrors/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/nextjs@latest-auth-withouterrors/.gitignore b/nextjs@latest-auth-withouterrors/.gitignore
new file mode 100644
index 0000000..55175ef
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
diff --git a/nextjs@latest-auth-withouterrors/README.md b/nextjs@latest-auth-withouterrors/README.md
new file mode 100644
index 0000000..58cd075
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/README.md
@@ -0,0 +1,4 @@
+after research and fighting with the code, there is important things to know :
+ middleware should be outisde pages
+ jsonwebtoken is not woking with nextjs middleware
+ we will use jose package insted of jsonwebtoken
\ No newline at end of file
diff --git a/nextjs@latest-auth-withouterrors/middleware.js b/nextjs@latest-auth-withouterrors/middleware.js
new file mode 100644
index 0000000..b6d2fdd
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/middleware.js
@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import * as jose from "jose";
+export default async function middleware(request) {
+ const authToken = request.cookies.get("token_name"); // get our cookie
+ if (request.nextUrl.pathname.includes("/dashboard")) {
+ if (authToken === undefined) {
+ return NextResponse.redirect(new URL("/login", request.url));
+ }
+ try {
+ const { payload: DATA } = await jose.jwtVerify(
+ authToken,
+ new TextEncoder().encode(`${process.env.SECRET_KEY_JWT}`)
+ );
+ if (!DATA) {
+ return NextResponse.redirect(new URL("/login", request.url));
+ }
+ return NextResponse.next();
+ } catch (error) {
+ console.log(error);
+ }
+ }
+ return NextResponse.next();
+}
+export const config = {
+ matcher: "/dashboard/:path*",
+};
diff --git a/nextjs@latest-auth-withouterrors/next.config.js b/nextjs@latest-auth-withouterrors/next.config.js
new file mode 100644
index 0000000..ae88795
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+ swcMinify: true,
+}
+
+module.exports = nextConfig
diff --git a/nextjs@latest-auth-withouterrors/package.json b/nextjs@latest-auth-withouterrors/package.json
new file mode 100644
index 0000000..c13b1ca
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "nextjs-auth-withouterrors",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "axios": "^0.27.2",
+ "cookie": "^0.5.0",
+ "jose": "^4.8.3",
+ "next": "12.2.2",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "react-icons": "^4.4.0",
+ "sass": "^1.53.0"
+ },
+ "devDependencies": {
+ "eslint": "8.20.0",
+ "eslint-config-next": "12.2.2"
+ }
+}
diff --git a/nextjs@latest-auth-withouterrors/pages/_app.js b/nextjs@latest-auth-withouterrors/pages/_app.js
new file mode 100644
index 0000000..eabbdd8
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.scss'
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
diff --git a/nextjs@latest-auth-withouterrors/pages/api/login.js b/nextjs@latest-auth-withouterrors/pages/api/login.js
new file mode 100644
index 0000000..20a7437
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/pages/api/login.js
@@ -0,0 +1,33 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { serialize } from "cookie";
+import * as jose from "jose";
+export default async function SignIn(req, res) {
+ const { method } = req;
+ switch (method) {
+ case "POST":
+ try {
+ const { email, password } = req.body;
+ if (!email || !password) {
+ return res.status(400).json("please fill up all fields");
+ }
+ const token = await new jose.SignJWT({
+ userId: `ayoubwazane`,
+ role: `admin`,
+ email: `ayoubwazane306@gmail.com`,
+ })
+ .setProtectedHeader({ alg: "HS256" })
+ .setIssuedAt()
+ .setExpirationTime("14d")
+ .sign(new TextEncoder().encode(`${process.env.SECRET_KEY_JWT}`));
+ const serialised = serialize("token_name", token, {
+ httpOnly: true,
+ secure: process.env.NODE_ENV !== "development",
+ sameSite: "strict",
+ maxAge: 60 * 60 * 24 * 2, //valid for two weaks
+ path: "/",
+ });
+ res.setHeader("Set-Cookie", serialised);
+ return res.status(202).json("user signed in successfully...");
+ } catch (error) {}
+ }
+}
diff --git a/nextjs@latest-auth-withouterrors/pages/api/signup.js b/nextjs@latest-auth-withouterrors/pages/api/signup.js
new file mode 100644
index 0000000..0367fa1
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/pages/api/signup.js
@@ -0,0 +1 @@
+const SignUp = async (req, res) => {};
diff --git a/nextjs@latest-auth-withouterrors/pages/dashboard/index.js b/nextjs@latest-auth-withouterrors/pages/dashboard/index.js
new file mode 100644
index 0000000..20c63b6
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/pages/dashboard/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+function Dashboard() {
+ return (
+
+ );
+}
+
+export default Dashboard;
diff --git a/nextjs@latest-auth-withouterrors/pages/index.js b/nextjs@latest-auth-withouterrors/pages/index.js
new file mode 100644
index 0000000..a34ed92
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/pages/index.js
@@ -0,0 +1,9 @@
+import styles from "../styles/Home.module.scss";
+
+export default function Home() {
+ return (
+
+
fixing nextjs latest version errors with middleware and jwttoken
+
+ );
+}
diff --git a/nextjs@latest-auth-withouterrors/pages/login.js b/nextjs@latest-auth-withouterrors/pages/login.js
new file mode 100644
index 0000000..8d30a2a
--- /dev/null
+++ b/nextjs@latest-auth-withouterrors/pages/login.js
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { FaRegEyeSlash } from "react-icons/fa";
+import { GiBleedingEye } from "react-icons/gi";
+import styles from "../styles/Home.module.scss";
+import axios from "axios";
+function Login() {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [showPassword, setShowPassword] = useState(false);
+ const [success, setSuccess] = useState("");
+ const [error, setError] = useState("");
+ const handlePasswordShowing = () => {
+ setShowPassword(!showPassword);
+ };
+ const handleInputs = (e, arg) => {
+ arg(e.target.value);
+ };
+ const onSubmitForm = (e) => {
+ e.preventDefault();
+ const data = {
+ email: email,
+ password: password,
+ };
+ return axios
+ .post("api/login", data)
+ .then((response) => {
+ setSuccess(response.data);
+ console.log(response.data);
+ })
+ .catch((err) => setError(err.response.data));
+ };
+ return (
+
+
+ {error.length <= 0 ? null :
{error}
}
+
+
+ {success.length <= 0 ? null :
{success}
}
+
+
+