redirecting from a route to a different one
Answered
West African Lion posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
I want to redirect to a different route using a server component
Answered by dumbboy
I helped him with middleware and cookies through vscode live share.
190 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i compare some input values to admin log in
and if the values are the same
i want to redirect
but idk how to do
i tried some methods but it returned errors
please help
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
import { NextResponse } from "next/server";
export async function POST(req) {
try {
const Data = await req.json();
if (Data.username === process.env.username) {
console.log("uwu");
} else {
console.log("now uwu");
}
console.log(Data.username, 'data');
console.log(process.env.name, 'env');
return NextResponse.json({ status: 201 });
} catch (error) {
return NextResponse.json({
message: "An error occurred while logging in",
status: 500,
});
}
}
.env
name=scopedevadmin
password=accessadmin1
response:
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143865023622557746/image.png)
api actually
but
im doing a comparison here
idk why but the values arent same
it must be
but it isnt
check code
here's response
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Data.username === process.env.username
If I'm not blind the env name is wrong.![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
huh
._.
bro
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Is it what I'm thinking
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
bro
solved
i lov u bro
and how im gonna direct it to a page :)
no
i ned ur help too
actually
ive used it before
ya
import { NextResponse } from "next/server";
import { redirect } from 'next/navigation'
export async function POST(req) {
try {
const Data = await req.json();
if (Data.username === process.env.name) {
console.log("uwu");
redirect('https://nextjs.org/');
} else {
console.log("now uwu");
}
return NextResponse.json({ status: 201 });
} catch (error) {
return NextResponse.json({
message: "An error occurred while logging in",
status: 500,
});
}
}
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Didn't check, but
NextResponse.redirect
works right?![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
@West African Lion Are you there?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
Im really sry
Im going to school
Im gonna be back in 2hrs
Sry
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Why sorry? See you later
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
Thx
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
💗
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
its not working
import { NextResponse } from "next/server";
import { redirect } from "next/navigation";
export async function POST(req) {
try {
const Data = await req.json();
if (Data.username === process.env.name) {
console.log("uwu");
const loginUrl = new URL("/admin", request.url);
loginUrl.searchParams.set("from", request.nextUrl.pathname);
return NextResponse.redirect(loginUrl);
} else {
console.log("now uwu");
}
// Given an incoming request...
} catch (error) {
return NextResponse.json({
message: "An error occurred while logging in",
status: 500,
});
}
}
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143919610157072534/image.png)
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143919658165092412/image.png)
server
client
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Where is
request
variable tho, isnt it req
@West African Lion
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
after doing changing requests to req something changed on terminal
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143922306142445678/image.png)
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Okay, is it working as expected
Also remove redirect import from
next/navigation
It isn't required.![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
but route isnt changed
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Try to reload again.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
can't i basically use window.location.href ðŸ«
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Till now I didn't understand, what you are trying to do exactly.
Can you explain.
Can you explain.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
still isnt working
bro
i am trying to do an admin page to my portfolio website to manage blogs
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143923448335315014/image.png)
here's my structure
i use api/admin/route.js beacuse i can't access process.env.varname in a client component
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Okay, what is need of checking the process.env.varname.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i store my valid data to login to my dashboard
there are input fields
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143923852536197262/image.png)
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Okay, you are trying to check if admin is logged in or not before allowing him to go to that page.
Am I right?
Am I right?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
ya ya
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
so, you have stored username and password in env that should match the logged in data?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
and i want to store a boolean data that has a value of "isLoggedIn"
yes, actually
as you can see on my console
the login data and the data on .env file do match
uwu is printed on my console
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Why don't you stop him at sign in, store some cookie
isLoggedIn
if the user entered right credentials, else show Invalid Credentials.Did you understand?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
now the main problem is redirecting to a different route
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
You are not supposed to write redirection in api, you directly need to write in page.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
but im comparing the data on api
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
You can/should use middleware, Do you have live server in vscode.
Api is called at /api but you want to restrict
/admin
routes. Right?![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
ya
i have
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Can you send the live share link, I can help you.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i think i got it
i can solve it using docs
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Okay, Close the forum once solved.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
okay
@dumbboy
bro
so i must fetch the request to middleware file right?
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Yeah
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
bro in ts
what is the type of req?
string?
imo its string, just asking
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Nope, I thinks it's NextRequest, just lemme check reql quick.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i just saw it on docs
thx
but i must read about the 'matcher'
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Yeah, it's just basic, you will be able to figure it out.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
where is the problem
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143929143176732713/image.png)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export async function middleware(request: NextRequest) {
console.log('hello')
try {
const Data = await request.json();
if (Data.username === process.env.name) {
console.log("uwu");
const loginUrl = new URL("/admin", request.url);
loginUrl.searchParams.set("from", request.nextUrl.pathname);
return NextResponse.redirect(loginUrl);
} else {
console.log("now uwu");
}
} catch (error) {
return NextResponse.json({
message: "An error occurred while logging in",
status: 500,
});
}
return NextResponse.redirect(new URL('/admin', request.url))
}
export const config = {
matcher: '/auth/:path*',
}
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Wheare are you storing the login credentials, May I know.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
.env
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
I mean the login credentials, if you are logged in you need to know right, so you need to use localstorage or cookies.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i didnt use it
but i need
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
You need to.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
how to
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
When logged in store you credentials in local storage or cookie then redirect to admin.
Then In middleware check if the credentials stored in local storage/cookie matches the .env or not.
Hope you understood.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
bro
i can't
where should i set the cookies
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Use this lib: https://www.npmjs.com/package/cookies-next
When Submit button is pressed.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
what does options mean
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
U can setup max age, for how long the cookie will be active.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i get undefined whey i try to log it on console
console.log(username)
setCookie('username', username)
setCookie('password', password)
console.log(getCookie(username))
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
U are getting any errors?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
no
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143933974557761609/image.png)
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
It's
getCookie("username")
Don't forget these
""
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
oh
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143935061721358407/image.png)
![Image](https://cdn.discordapp.com/attachments/1143658468843212880/1143935092973117666/image.png)
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
It's getCookie not getCookies
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
UGGHH
getCookie("username") === process.env.name ? NextResponse.redirect(new URL('/admin', request.url)): ''
isnt it true
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
WDYM
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
i still cant redirect
im gonna be back in 10mins im eating now
sry
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
No worries
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
its been an hour
i forgot 💀
sry
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
@dumbboy
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
I forgot too @West African Lion , How is it going
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
😄
i even forgot to eat
not good
the error still prerists
wbu
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Nothing, just doing company work
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
nice
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
I forgot to mention to get cookie in server side you need to pass
res,req
in optionsor, you can just use
request.cookies.get("username")
can you try this once
If you are still doing the project
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
bro
live server
no more thing
i cant do it
share*
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Okay, share the link
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Request Sent
you there?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
sry
i was looking for ur req
@dumbboy
yo
i made u read & write
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Did you create
middleware.ts
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
ya
in auth/
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Can you open any path starting with admin
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
@dumbboy
the hell
it worked
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Congratulations
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
you there?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
@dumbboyim back
lemme read
@dumbboybro actually im really new at next.js
and i don't know a lot how to do what you said
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
It's simple just follow me on vscode, I will do it.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
ok
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Live Share sucks
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
Can you check now
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
West African LionOP
@dumbboyacc my req
![Avatar](https://cdn.discordapp.com/avatars/839454110302732309/d3f0b9db767484084f52339f0b4f2385.webp?size=256)
dumbboy
I helped him with middleware and cookies through vscode live share.
Answer