I have a nextjs app that use aws cognito for auth. i was wondering if there is a way to replace the hosted ui provided by aws with my own custom form.

import { Domain } from "@material-ui/icons";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
    providers:[
        Providers.Cognito({
            clientId:process.env.COGNITO_CLIENT,
            clientSecret:process.env.COGNITO_CLIENT_SECRET,
            domain: process.env.COGNITO_DOMAIN
        })

        
    ]
})

I have a nextjs app that use aws cognito for auth. i was wondering if there is a way to replace the hosted ui provided by aws with my own custom form.

import { Domain } from "@material-ui/icons";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
    providers:[
        Providers.Cognito({
            clientId:process.env.COGNITO_CLIENT,
            clientSecret:process.env.COGNITO_CLIENT_SECRET,
            domain: process.env.COGNITO_DOMAIN
        })

        
    ]
})

• javascript
• reactjs
• amazon-web-services
• next.js
• amazon-cognito

Share Improve this question Follow asked Nov 26, 2021 at 5:51 Nahashon MuriithiNahashon Muriithi 9111 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Technically, yes it is possible, but @alexrogo answer is misleading. Amplify, apart from being highly questionable (just look at open tickets on github), doesn't use OpenIDConnect standard. It's doing direct Cognito initiateAuth operation which returns tokens without openid scope. If you try to call e.g. /userinfo endpoint on Cognito, that will fail. Also Amplify keeps tokens in either local storage or cookies depending how you configure it but it's no httponly cookie... That's very troublesome.

But that being said, it is possible to replace HostedUI but beware, as HostedUI is not just a UI! It's a full authorization server. And you have to implement those functionalities yourself if you want to omit its login page. See here for more details: AWS Cognito Authorization code grant flow without using the hosted UI

Yes, this is possible.

You can connect your own UI ponents to Cogntio's APIs. You can store your authentication token in the state or localstorage. Take a look at this Documentation.

There you will find every neccesary function, including Sign Up, Sign In, Log out, Change User Attributes, refreshing tokens.

Just to follow up with @alexrogo Amplify has a whole built in UI connected ponent system, so you don't have to build your custom UI by yourself. This is the getting started guide.

The default flow when you setup a new user pool with Amplify is the USER_SRP_AUTH flow. The Cognito Hosted UI has options for OAuth 2.0 federation and OpenID Connect

With that said, if you prefer, you can setup federated OAuth 2.0 accounts with the Amplify UI, as seen here.