Authentication with aws amplify without using UI component with app router (next js 14)

[pseudo ibex]

I have a problem on how to make the authentication with the app router and aws amplify.

[magic chasm]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[foggy estuary]

you can use their library to handle auth with amplify and app router:
https://docs.amplify.aws/javascript/build-a-backend/auth/enable-sign-up/#sign-in

[pseudo ibex]

Yes I tried but for the logic. where to put Authenticator with the app router. When I do I get some errors

[foggy estuary]

you can add this (see attached) to your global provider. The global provider is a clientside component that wraps the children in it, so every children can stay server or clientside, but can still access amplify.

[pseudo ibex]

Yes I did all those steps. At the. I have already existing ressources so I filled the infos with Amplify.configure({'my data here'}). Now for the logic., I wrapped my root layout with <Authenticator> This works perfectly. I have authentication in the whole app but I don't have the ability to like make a custom page login or signup and make a flow where if the user is not connected to be redirected to login etc..

[foggy estuary]

but I don't have the ability to like make a custom page login or signup and make a flow

When using the Authenticator component from amplify you are not able to create a custom workflow. Of course you can change the visual part (see here) but not the functional (flow) part. So either rely on the authenticator and have no custom flow or create your own custom flow with the javascript library

[pseudo ibex]

Okay so I guess I use jotai or context to have a auth state. If not authenticated , redirect to login and then I create my custom forms to auth with amplify functions right ?

But the problem that occurs with that is that if I try to access a page, I see the page for 1s before getting redirected to login page

[foggy estuary]

correct. The redirect can be handled by a middleware and the signin, signup and currentUser can be handled via the javascript library

[foggy estuary]

middleware is your solution ^^
Check the auth directly inside your middleware. It will be executed before the page even started loading

[pseudo ibex]

Sorry for noob question but what is exactly a middleware. Is that the contxt ?

[foggy estuary]

That’s fine. A middleware is a file that gets executed before another file (for example a layout or a page or whatever) loads. And the other file only loads after the middleware finished execution. You can take a look at the middleware here: https://nextjs.org/docs/app/building-your-application/routing/middleware

[pseudo ibex]

Ok thanks I will check that

[magic chasm]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1235290516992557056 message)

[pseudo ibex]

It seems that when I put the getcurrentuser in the middle ware, It tells me Auth UserPool not configured but it is configured in the Layout of the route