个人中心
gpt4 book ai didi

how to completely destroy client side session with NextAuth.js & AWS Cognito(如何完全销毁客户端与NextAuth.js和AWS Cognito的会话)

转载 作者：bug小助手 更新时间：2023-10-25 12:57:11 25 4
gpt4 key购买 nike



i am using Next.js with NextAuth.js with a amazon cognito setup and my issue is that when i click on signin link right after logging out, my user gets signed in directly without getting asked for credentials.

我将Next.js与NextAuth.js一起使用，并设置了Amazon Cogito，我的问题是，当我在注销后立即单击登录链接时，我的用户会直接登录，而不会被要求提供凭据。


my [...nextauth].ts looks like this:

我的[...nextauth].ts如下所示：


import NextAuth from 'next-auth';
import CognitoProvider from 'next-auth/providers/cognito';

export const authOptions = {
  providers: [
    CognitoProvider({
      clientId: process.env.COGNITO_CLIENT_ID || '',
      clientSecret: process.env.COGNITO_CLIENT_SECRET || '',
      issuer: process.env.COGNITO_ISSUER_URL,
    }),
  ],
  debug: process.env.NODE_ENV !== 'production' ? true : false,
};

export default NextAuth(authOptions);

For authentication i use the Next helper methods signIn and signOut:

对于身份验证，我使用下一个帮助器方法signin和signout：


interface HomeProps {
  appTitle: string;
}

const Home: NextPage<HomeProps> = ({ appTitle }) => {
  const { data: session, status } = useSession();

  if (status === 'authenticated') {
    return (
      <>
        <Head>
          <title>{appTitle}</title>
        </Head>
        <p>Signed in as {session.user?.email}</p>
        <Link href="/">
          <a
            onClick={() => {
              signOut();
            }}
          >
            Log out
          </a>
        </Link>
      </>
    );
  }

  return (
    <>
      <Head>
        <title>{appTitle}</title>
      </Head>
      <Link href="/">
        <a
          onClick={(event) => {
            event.preventDefault();
            signIn('cognito', {
              callbackUrl: 'http://localhost:3000',
            });
          }}
        >
          Sign In
        </a>
      </Link>
    </>
  );
};

export default Home;

I assume that the client keeps some information about the previous signed in user after logout but i don't know which data and where it is located.

我假设客户端在注销后保留了一些关于以前登录的用户的信息，但我不知道数据是什么，也不知道它位于哪里。


I would like to completely delete all information after logout so that when clicking on signin the user always gets asked for credentials. Any help would be appreciated.

我想在注销后完全删除所有信息，以便当单击登录时，用户总是被要求提供凭据。任何帮助都将不胜感激。


更多回答
优秀答案推荐

I have been facing this same issue and tracked back why thats happening. When the helper signIn method is invoked it redirects us to the hosted UI provided by cognito which is a different domain website from your own app. And that particular domain has its own local storage and session information. Cognito utilise that session credentials and logs you in without prompting for new username and password.

我一直面临着同样的问题，并追溯了为什么会发生这种情况。当Helper Sign in方法被调用时，它会将我们重定向到由Cogito提供的托管UI，这是一个与您自己的应用程序不同的域网站。并且该特定域具有其自己的本地存储和会话信息。Cognito利用该会话凭据并让您登录，而不会提示您输入新的用户名和密码。


For now, I couldn't find a proper solution for my use case as for security, you're not allowed to edit (or delete) a cookie on another site. So I am just providing these information for tracking back the how the client side storing that data.

目前，我找不到一个合适的解决方案，因为安全性，你不允许编辑（或删除）另一个网站上的cookie。所以我只是提供这些信息来跟踪客户端如何存储这些数据。


One solution is invoking the logout endpoint provided here. On logout you can make a callback for that url which will clear the credential from that cognito domain each time you signout

一种解决方案是调用此处提供的注销端点。在注销时，您可以对该url进行回调，这将在您每次注销时清除该认知域中的凭据。



Make sure you registered Allowed sign-out URLs in Hosted UI of AppClient in Cognito eg : http://localhost:3000/login

确保您在Cognito中的AppClient托管UI中注册了允许的注销URL，例如：http：//localhost：3000/login


Then

然后



import { signOut } from "next-auth/react";

export default function useLogout() {
  const handleLogout = async function () {
    const logoutCognitoUrl = `${process.env.NEXT_PUBLIC_AWS_COGNITO_DOMAIN}/logout?client_id=${process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID}&logout_uri=${process.env.NEXT_PUBLIC_APP_URL}/login&redirect_uri=${process.env.NEXT_PUBLIC_APP_URL}/login&response_type=code`;
    return signOut({
      callbackUrl: logoutCognitoUrl,
    });
  };

  return {
    handleLogout,
  };
}


Logout URL sample: https://your-pool-id-rhw.auth.ap-southeast-1.amazoncognito.com/logout?client_id=client_id_bkh24&logout_uri=http://localhost:3000/login&redirect_uri=http://localhost:3000/login&response_type=code

注销URL示例：https://your-pool-id-rhw.auth.ap-southeast-1.amazoncognito.com/logout?client_id=client_id_bkh24&logout_uri=http://localhost:3000/login&redirect_uri=http://localhost:3000/login&response_type=code


It this is a copy ready version of @FaisalHossain

这是@FaisalHossain的复制就绪版本



There are workarounds that involve overriding the built in SignOut methods, but obviously it would be ideal if this can be added into nextauth as a feature.

有一些解决办法涉及覆盖内置的Signout方法，但显然，如果这可以作为一个功能添加到Nextauth中，那将是最理想的。



The answer provided by @vanduc1102 is almost perfect. To sign out user we need to redirect to the logout Cognito url using the router (or something else).

@vanduc1102提供的答案近乎完美。要注销用户，我们需要使用路由器(或其他东西)重定向到注销Cognito url。


The callbackUrl from signOut method is a URL which will redirect user after sign in. This URL needs to be absolute URL at the same host name or relative (Next Auth docs about callBackUrl and signOut).

来自Signout的回调URL方法是一个URL，它将在登录后重定向用户。此URL需要是相同主机名或相对主机名的绝对URL(Next Auth文档介绍了allBackUrl和Signout)。


Hence we need to use signOut({ redirect: false }) so the page will not be reloaded and then we need to redirect to Cognito sign out URL using router =>
router.push(logoutCognitoUrl).

因此，我们需要使用Signout({reDirect：FALSE})，这样页面就不会被重新加载，然后我们需要使用ROUR=>router.ush(LogoutCognitoUrl)重定向到Cognito注销URL。


"use client";
import { signOut } from "next-auth/react";
import { useRouter } from "next/navigation";

export function SingOutButton() {
    const router = useRouter();

    const logoutCognitoUrl = `${process.env.NEXT_PUBLIC_AWS_COGNITO_DOMAIN}/logout?client_id=${process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID}&logout_uri=${process.env.NEXT_PUBLIC_APP_URL}/login&redirect_uri=${process.env.NEXT_PUBLIC_APP_URL}/login&response_type=code`;

    return (
        <button
            onClick={() =>
                signOut({ redirect: false }).then(() =>
                    router.push(logoutCognitoUrl),
                )
            }
        >
            Sign out
        </button>
    );
}

更多回答

25 4 0
文章推荐： Twilio Bulk SMS API in salesforce(Salesforce中的Twilio Bulk SMS API)
文章推荐： How to configure Intellij to use Gradle wrapper from directory other than project's root?(如何将IntelliJ配置为从项目根目录以外的目录使用Gradle包装器？)
文章推荐： SSR classNames issue with React, Express and ChakraUI components(Reaction、Express和ChakraUI组件的SSR类名称问题)
文章推荐： Multi-looping with gitlab Graphql API(使用GitLab GraphQL API实现多循环)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com