{"id":8403,"date":"2023-02-25T09:23:25","date_gmt":"2023-02-25T05:53:25","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/"},"modified":"2023-02-25T09:23:25","modified_gmt":"2023-02-25T05:53:25","slug":"social-login-with-cognito-and-nextauth-1036","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/","title":{"rendered":"\u0648\u0631\u0648\u062f \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0628\u0627 Cognito \u0648 NextAuth"},"content":{"rendered":"<div data-article-id=\"1378532\" id=\"article-body\">\n<p>\u0627\u0633\u062a\u062e\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 AWS Cognito \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 AWS \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0647\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc \u06a9\u0647 \u0627\u0632 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0648\u0642\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0631\u0648\u06cc \u0632\u06cc\u0631\u0633\u0627\u062e\u062a AWS \u0645\u06cc\u200c\u0633\u0627\u0632\u0645\u060c \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u062f\u063a\u0627\u0645 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0622\u0646 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u06cc AWS \u0645\u0627\u0646\u0646\u062f \u0645\u062c\u0648\u0632 API Gateway\u060c \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc\u200c\u062f\u0647\u0645 \u0627\u0632 \u0627\u0633\u062a\u062e\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 Cognito \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645.<\/p>\n<p>\u0627\u0633\u062a\u062e\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 Cognito \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0648\u0631\u0648\u062f \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u06a9\u062b\u0631 \u0645\u0631\u062f\u0645 \u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062d\u0633\u0627\u0628 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0645\u0627\u0646\u0646\u062f \u06af\u0648\u06af\u0644\u060c \u0641\u06cc\u0633 \u0628\u0648\u06a9\u060c \u0627\u067e\u0644 \u0648 \u063a\u06cc\u0631\u0647 \u0639\u0627\u062f\u062a \u06a9\u0631\u062f\u0647 \u0627\u0646\u062f\u060c \u0628\u0633\u06cc\u0627\u0631 \u0631\u0627\u062d\u062a \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u0644\u0627\u06af\u06cc\u0646 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Next.js \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 Cognito \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f.  \u0645\u0627 \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0648\u062f \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0633\u0627\u0628\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u062e\u0648\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u0632 Cognito \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u067e\u0631\u0648\u06a9\u0633\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646 Cognito \u0631\u0627 \u062f\u0648\u0631 \u0628\u0632\u0646\u06cc\u0645 \u062a\u0627 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u062c\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0633\u062a\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc\u060c \u0686\u0646\u062f \u0645\u0632\u06cc\u062a \u062f\u0627\u0631\u062f:<\/p>\n<ol>\n<li>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0627\u0633\u062a\u062e\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 Cognito \u0648 \u0647\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u063a\u0646\u06cc \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p>\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0628\u0627 1 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631\u060c Cognito \u0633\u0631 \u0648 \u06a9\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0627 \u0627\u06cc\u0646 \u0622\u0632\u0627\u062f\u06cc \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u062e\u0648\u062f \u0631\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0648\u0633\u0637 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0634\u062f\u0647 Cognito \u062f\u0631 \u0628\u0646\u062f \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p>\u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u062e\u0648\u062f\u0645\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<\/ol>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_NextAuth\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc NextAuth<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/#%D8%A8%D9%87%D8%A8%D9%88%D8%AF_%D9%BE%D8%A7%D8%B3%D8%AE_%D8%A8%D9%87_%D8%AA%D9%85%D8%A7%D8%B3\" >\u0628\u0647\u0628\u0648\u062f \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/#%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%AC%D9%84%D8%B3%D9%87_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\" >\u062f\u0631 \u062d\u0627\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0647 \u0645\u0634\u062a\u0631\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/#%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_Frontend_%D8%A8%D8%A7_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86\" >\u0648\u0631\u0648\u062f \u0628\u0647 Frontend \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/social-login-with-cognito-and-nextauth-1036\/#Frontend_useSession_hook\" >Frontend useSession hook<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0631\u0648\u0646\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0633\u062a\u062e\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 Cognito \u0634\u0645\u0627 \u0646\u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f.  \u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0645\u0631\u0627\u062d\u0644 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647:<\/p>\n<ol>\n<li>\n<p>\u0627\u0633\u062a\u062e\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 Cognito.<\/p>\n<\/li>\n<li>\n<p>\u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627.  \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0647\u0645\u0647 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0646\u062f\u0627\u0631\u06cc\u062f\u060c \u0641\u0642\u0637 \u06cc\u06a9\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a.  \u0647\u0645\u06cc\u0634\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0639\u062f\u0627\u064b \u0648\u0635\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u062f\u0627\u0645\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627.  \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u062f\u0627\u0645\u0646\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627\u0634\u062f.  \u062f\u0627\u0645\u0646\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 aws \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a.<\/p>\n<\/li>\n<\/ol>\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 auth \u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0628\u0627\u06cc\u062f \u0634\u0628\u06cc\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_NextAuth\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc NextAuth<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0627\u0628\u062a\u062f\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 NextAuth \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm install next-auth\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a NextAuth \u0631\u0627 \u062f\u0631 \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f <code>\/api\/auth\/[...nextauth].ts<\/code>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TokenSet<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next-auth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">NextAuth<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next-auth\/next<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Provider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next-auth\/providers<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> \n  <span class=\"nx\">NEXTAUTH_URL<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">COGNITO_REGION<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">COGNITO_DOMAIN<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">COGNITO_CLIENT_ID<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">COGNITO_USER_POOL_ID<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">COGNITO_CLIENT_SECRET<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">TProvider<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Amazon<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Apple<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Facebook<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Google<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nx\">getProvider<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">:<\/span> <span class=\"nx\">TProvider<\/span><span class=\"p\">):<\/span> <span class=\"nx\">Provider<\/span> <span class=\"p\">{<\/span>\n   <span class=\"cm\">\/*\n      Provider generation function to avoid repeating ourselved when\n      declaring providers in the authOptions below.\n   *\/<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ e.g. cognito_google | cognito_facebook<\/span>\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`cognito_<\/span><span class=\"p\">${<\/span><span class=\"nx\">provider<\/span><span class=\"p\">.<\/span><span class=\"nx\">toLowerCase<\/span><span class=\"p\">()}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>  \n\n    <span class=\"c1\">\/\/ e.g. CognitoGoogle | CognitoFacebook<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Cognito<\/span><span class=\"p\">${<\/span><span class=\"nx\">provider<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">oauth<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ The id of the app client configured in the user pool.<\/span>\n    <span class=\"na\">clientId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_ID<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ The app client secret.<\/span>\n    <span class=\"na\">clientSecret<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_SECRET<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"na\">wellKnown<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`https:\/\/cognito-idp.<\/span><span class=\"p\">${<\/span><span class=\"nx\">COGNITO_REGION<\/span><span class=\"p\">}<\/span><span class=\"s2\">.amazonaws.com\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">COGNITO_USER_POOL_ID<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/.well-known\/openid-configuration`<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ Authorization endpoint configuration<\/span>\n    <span class=\"na\">authorization<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">COGNITO_DOMAIN<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/oauth2\/authorize`<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">params<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">response_type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">code<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">client_id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_ID<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">identity_provider<\/span><span class=\"p\">:<\/span> <span class=\"nx\">provider<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">redirect_uri<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">NEXTAUTH_URL<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/api\/auth\/callback\/cognito_<\/span><span class=\"p\">${<\/span><span class=\"nx\">provider<\/span><span class=\"p\">.<\/span><span class=\"nx\">toLowerCase<\/span><span class=\"p\">()}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"c1\">\/\/ Token endpoint configuration<\/span>\n    <span class=\"na\">token<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">COGNITO_DOMAIN<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/oauth2\/token`<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">params<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">grant_type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">authorization_code<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">client_id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_ID<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">client_secret<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_SECRET<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">redirect_uri<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">NEXTAUTH_URL<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/api\/auth\/callback\/cognito_<\/span><span class=\"p\">${<\/span><span class=\"nx\">provider<\/span><span class=\"p\">.<\/span><span class=\"nx\">toLowerCase<\/span><span class=\"p\">()}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"c1\">\/\/ userInfo endpoint configuration<\/span>\n    <span class=\"na\">userinfo<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">COGNITO_DOMAIN<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/oauth2\/userInfo`<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"c1\">\/\/ Profile to return after successcul auth.<\/span>\n    <span class=\"c1\">\/\/ You can do some transformation on your profile object here.<\/span>\n    <span class=\"na\">profile<\/span><span class=\"p\">:<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">profile<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">profile<\/span><span class=\"p\">.<\/span><span class=\"nx\">sub<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">...<\/span><span class=\"nx\">profile<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">authOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"cm\">\/*\n    Generate the providers for each of our social login.\n    Adding a new OIDC provider is a simple as adding the name of the         provider as displayed in the Cognito user pool to the TProvider type\nand to this array.\n  *\/<\/span>\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"p\">...[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Amazon<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Apple<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Facebook<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Google<\/span><span class=\"dl\">\"<\/span><span class=\"p\">].<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"na\">provider<\/span><span class=\"p\">:<\/span> <span class=\"nx\">TProvider<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">getProvider<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)),<\/span>\n  <span class=\"p\">],<\/span>\n\n  <span class=\"na\">callbacks<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">async<\/span> <span class=\"nx\">signIn<\/span><span class=\"p\">({<\/span> <span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">account<\/span><span class=\"p\">,<\/span> <span class=\"nx\">profile<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Return true to allow sign in and false to block sign in.<\/span>\n      <span class=\"k\">return<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"k\">async<\/span> <span class=\"nx\">redirect<\/span><span class=\"p\">({<\/span> <span class=\"nx\">url<\/span><span class=\"p\">,<\/span> <span class=\"nx\">baseUrl<\/span> <span class=\"p\">}){<\/span>\n      <span class=\"c1\">\/\/ Return the url to redirect to after successful sign in.<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">baseUrl<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"k\">async<\/span> <span class=\"nx\">jwt<\/span><span class=\"p\">({<\/span> <span class=\"nx\">token<\/span><span class=\"p\">,<\/span> <span class=\"nx\">account<\/span><span class=\"p\">,<\/span> <span class=\"nx\">profile<\/span><span class=\"p\">,<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">}){<\/span>\n      <span class=\"c1\">\/\/ Retrieve jwt tokens<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">account<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ account is provided upon the inital auth<\/span>\n        <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n          <span class=\"p\">...<\/span><span class=\"nx\">token<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">accessToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nx\">access_token<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">idToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nx\">id_token<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"k\">async<\/span> <span class=\"nx\">session<\/span><span class=\"p\">({<\/span> <span class=\"nx\">session<\/span><span class=\"p\">,<\/span> <span class=\"nx\">token<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n      <span class=\"cm\">\/* \n         Forward tokens to client in case you need to make authorized\n         API calls to an AWS service directly from the front end.\n      *\/<\/span>\n      <span class=\"nx\">session<\/span><span class=\"p\">.<\/span><span class=\"nx\">accessToken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">accessToken<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">session<\/span><span class=\"p\">.<\/span><span class=\"nx\">idToken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">idToken<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">session<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">NextAuth<\/span><span class=\"p\">(<\/span><span class=\"nx\">authOptions<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f\u060c \u0645\u0627 \u06cc\u06a9 \u062c\u0631\u06cc\u0627\u0646 \u0627\u0648\u0644\u06cc\u0647 OAuth2.0 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc OIDC Cognito \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u062c\u0631\u06cc\u0627\u0646 \u0628\u0627 \u0647\u0631 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 OIDC \u06a9\u0647 \u062f\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87%D8%A8%D9%88%D8%AF_%D9%BE%D8%A7%D8%B3%D8%AE_%D8%A8%D9%87_%D8%AA%D9%85%D8%A7%D8%B3\"><\/span>\n<p>  \u0628\u0647\u0628\u0648\u062f \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0633\u0646\u0627\u0631\u06cc\u0648\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0622\u0646 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0647\u0646\u06af\u0627\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0632 \u0627\u06cc\u0646 \u0637\u0631\u06cc\u0642\u060c Cognito \u06cc\u06a9 \u0646\u0634\u0627\u0646\u0647 \u062a\u0627\u0632\u0647\u200c\u0633\u0627\u0632\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc \u0645\u062f\u062a \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.  \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062a\u0648\u06a9\u0646\u200c\u0647\u0627\u06cc \u06af\u0641\u062a\u0647 \u0634\u062f\u0647 \u0645\u0646\u0642\u0636\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u0627\u0632 \u0646\u0634\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062a\u0627\u0632\u0647\u200c\u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0648\u06a9\u0646\u200c\u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0648 \u0634\u0646\u0627\u0633\u0647 \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u062a \u0637\u0648\u0644\u0627\u0646\u06cc \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u062c\u0628\u0648\u0631 \u06a9\u0646\u06cc\u0645 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u062a\u0648\u06a9\u0646\u200c\u0647\u0627\u06cc\u0634 \u0645\u0646\u0642\u0636\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648\u0627\u0631\u062f \u0634\u0648\u062f\u060c \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u0645.  \u0645\u0627 \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0647 \u062f\u0648\u0628\u0627\u0631\u0647 \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u0648\u062f \u06a9\u0647 \u062e\u0648\u062f \u062a\u0648\u06a9\u0646 refresh \u0645\u0646\u0642\u0636\u06cc \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0634 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627\u0637\u0644 \u0634\u0648\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u060c \u0628\u0627\u06cc\u062f \u06a9\u062f \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645 <code>jwt<\/code> \u0648 <code>session<\/code> \u062a\u0648\u0627\u0628\u0639 \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 <code>jwt<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">async<\/span> <span class=\"nx\">jwt<\/span><span class=\"p\">({<\/span> <span class=\"nx\">token<\/span><span class=\"p\">,<\/span> <span class=\"nx\">account<\/span><span class=\"p\">,<\/span> <span class=\"nx\">profile<\/span><span class=\"p\">,<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">}){<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">account<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ This is an initial login, set JWT tokens.<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"p\">...<\/span><span class=\"nx\">token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">accessToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nx\">access_token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">idToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nx\">id_token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">refreshToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nx\">refresh_token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">expiresAt<\/span><span class=\"p\">:<\/span> <span class=\"nx\">account<\/span><span class=\"p\">.<\/span><span class=\"nx\">expires_at<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">tokenType<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Bearer<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">()<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">expiresAt<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Access\/Id token are still valid, return them as is.<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">token<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"c1\">\/\/ Access\/Id tokens have expired, retrieve new tokens using the <\/span>\n  <span class=\"c1\">\/\/ refresh token<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">COGNITO_DOMAIN<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/oauth2\/token`<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> \n        <span class=\"dl\">\"<\/span><span class=\"s2\">Content-Type<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">application\/x-www-form-urlencoded<\/span><span class=\"dl\">\"<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">URLSearchParams<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">client_id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_ID<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">client_secret<\/span><span class=\"p\">:<\/span> <span class=\"nx\">COGNITO_CLIENT_SECRET<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">grant_type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">refresh_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">refresh_token<\/span><span class=\"p\">:<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">refreshToken<\/span>\n      <span class=\"p\">}),<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">POST<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"na\">tokens<\/span><span class=\"p\">:<\/span> <span class=\"nx\">TokenSet<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"k\">throw<\/span> <span class=\"nx\">tokens<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"p\">...<\/span><span class=\"nx\">token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">accessToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">tokens<\/span><span class=\"p\">.<\/span><span class=\"nx\">access_token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">idToken<\/span><span class=\"p\">:<\/span> <span class=\"nx\">tokens<\/span><span class=\"p\">.<\/span><span class=\"nx\">id_token<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">expiresAt<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nx\">now<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"p\">(<\/span><span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">tokens<\/span><span class=\"p\">.<\/span><span class=\"nx\">expires_in<\/span><span class=\"p\">)<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Could not refresh tokens, return error<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error refreshing access and id tokens: <\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">token<\/span><span class=\"p\">,<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">RefreshTokensError<\/span><span class=\"dl\">\"<\/span> <span class=\"k\">as<\/span> <span class=\"kd\">const<\/span> <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0642\u0628\u0644 \u0627\u0632 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u062a\u0648\u06a9\u0646\u200c\u0647\u0627\u06cc jwt \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0648\u06a9\u0646 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\n<p>\u0627\u06af\u0631 \u0627\u0648\u0644\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0633\u062a (\u06cc\u0639\u0646\u06cc \u0627\u0642\u062f\u0627\u0645 \u0627\u0648\u0644\u06cc\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645)\u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>accessToken<\/code>\u060c <code>idToken<\/code>\u060c <code>refreshToken<\/code>\u060c \u0648 <code>expiresAt<\/code> \u0628\u0647 \u0634\u06cc \u0646\u0634\u0627\u0646\u0647.  \u0631\u0627 <code>expiresAt<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0645\u0627 \u0627\u0637\u0644\u0627\u0639 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0646\u0634\u0627\u0646\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u0648 \u0634\u0646\u0627\u0633\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0645\u0646\u0642\u0636\u06cc \u0645\u06cc \u0634\u0648\u062f.  \u0634\u06cc \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0628\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>token<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062f\u0631 \u062a\u0645\u0627\u0645 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u062a\u0648\u06a9\u0646 \u0628\u0639\u062f\u06cc.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0646\u06cc\u0633\u062a\u060c \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0646\u0634\u0627\u0646\u0647 \u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0648 \u0634\u0646\u0627\u0633\u0647 \u0628\u0627 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0632\u0645\u0627\u0646 \u0641\u0639\u0644\u06cc \u0628\u0627 <code>expiresAt<\/code> \u0632\u0645\u0627\u0646 \u062f\u0631 \u0634\u06cc \u0646\u0634\u0627\u0646\u0647 \u06a9\u0647 \u062f\u0631 \u0646\u0642\u0637\u0647 1 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u062a\u0648\u06a9\u0646 \u0647\u0627 \u0645\u0646\u0642\u0636\u06cc \u0646\u0634\u062f\u0647 \u0627\u0646\u062f\u060c \u0647\u0645\u0627\u0646 \u0634\u06cc \u0646\u0634\u0627\u0646\u0647 \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u062a\u0648\u06a9\u0646\u200c\u0647\u0627 \u0645\u0646\u0642\u0636\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0634\u0627\u0646\u0647 \u062a\u0627\u0632\u0647\u200c\u0633\u0627\u0632\u06cc\u060c \u062a\u0648\u06a9\u0646\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u0648\u0627\u06a9\u0634\u06cc \u0646\u0627\u0645\u0648\u0641\u0642 \u0628\u0648\u062f\u060c \u062e\u0637\u0627 \u0631\u0627 \u067e\u0631\u062a\u0627\u0628 \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u0628\u0644\u0648\u06a9 catch\u060c \u0634\u06cc \u0646\u0634\u0627\u0646\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f \u0627\u0645\u0627 an \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>error<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0647\u062f\u0627\u06cc\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u0648\u0627\u06a9\u0634\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0648\u062f\u060c \u0622\u0646 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f <code>accessToken<\/code>\u060c <code>idToken<\/code> \u0648 <code>expiresAt<\/code> \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u062f\u0631 \u0634\u06cc token \u0648 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0634\u06cc token \u062c\u062f\u06cc\u062f.<\/p>\n<\/li>\n<\/ol>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645 <code>session<\/code> \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633  \u0627\u06cc\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062c\u0644\u0633\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>useSession<\/code> \u0642\u0644\u0627\u0628.<\/p>\n<p>\u062a\u0646\u0647\u0627 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>error<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062a\u0648\u06a9\u0646 \u0628\u0647 \u0634\u06cc \u062c\u0644\u0633\u0647.  \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062e\u0637\u0627 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0647\u062f\u0627\u06cc\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">async<\/span> <span class=\"nx\">session<\/span><span class=\"p\">({<\/span> <span class=\"nx\">session<\/span><span class=\"p\">,<\/span> <span class=\"nx\">token<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"cm\">\/* \n    Forward tokens to client in case you need to make authorized API      \n    calls to an AWS service directly from the front end.\n  *\/<\/span>\n  <span class=\"nx\">session<\/span><span class=\"p\">.<\/span><span class=\"nx\">accessToken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">accessToken<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">session<\/span><span class=\"p\">.<\/span><span class=\"nx\">idToken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">idToken<\/span><span class=\"p\">;<\/span>\n  <span class=\"cm\">\/* \n    If there is an error when refreshing tokens, include it so it can \n    be forwarded to the front end.\n  *\/<\/span>\n  <span class=\"nx\">session<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">token<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">session<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%AC%D9%84%D8%B3%D9%87_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\"><\/span>\n<p>  \u062f\u0631 \u062d\u0627\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0647 \u0645\u0634\u062a\u0631\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0627\u062a\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f <code>_app.tsx<\/code> <em>\u06cc\u0627<\/em> <code>_app.jsx<\/code>  \u0641\u0627\u06cc\u0644 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/styles\/globals.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SessionProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next-auth\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nx\">MyApp<\/span><span class=\"p\">({<\/span> \n  <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">pageProps<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">session<\/span><span class=\"p\">,<\/span> <span class=\"p\">...<\/span><span class=\"nx\">pageProps<\/span> <span class=\"p\">}<\/span>\n<span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">SessionProvider<\/span> <span class=\"nx\">session<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">session<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">pageProps<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/SessionProvider<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">MyApp<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u0632 \u062c\u0644\u0633\u0647 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_Frontend_%D8%A8%D8%A7_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86\"><\/span>\n<p>  \u0648\u0631\u0648\u062f \u0628\u0647 Frontend \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u0634\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"cm\">\/* The getProviders function returns a promise that resolves\n   to an object containing all of the configured providers. *\/<\/span>\n<span class=\"c1\">\/\/ The signIn functions initiates the signIn process.<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getProviders<\/span><span class=\"p\">,<\/span> <span class=\"nx\">signIn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next-auth\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">SignIn<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">providers<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setProviders<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Fetch providers on mount.<\/span>\n  <span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">getProviders<\/span><span class=\"p\">().<\/span><span class=\"nx\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">providers<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setProviders<\/span><span class=\"p\">(<\/span><span class=\"nx\">providers<\/span><span class=\"p\">));<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">providers<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n              <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">signIn<\/span><span class=\"p\">(<\/span><span class=\"nx\">providers<\/span><span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cognito_amazon<\/span><span class=\"dl\">\"<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Login<\/span> <span class=\"kd\">with<\/span> <span class=\"nx\">Amazon<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n              <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">signIn<\/span><span class=\"p\">(<\/span><span class=\"nx\">providers<\/span><span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cognito_apple<\/span><span class=\"dl\">\"<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Login<\/span> <span class=\"kd\">with<\/span> <span class=\"nx\">Apple<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n              <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">signIn<\/span><span class=\"p\">(<\/span><span class=\"nx\">providers<\/span><span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cognito_facebook<\/span><span class=\"dl\">\"<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Login<\/span> <span class=\"kd\">with<\/span> <span class=\"nx\">Facebook<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n              <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">signIn<\/span><span class=\"p\">(<\/span><span class=\"nx\">providers<\/span><span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cognito_google<\/span><span class=\"dl\">\"<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Login<\/span> <span class=\"kd\">with<\/span> <span class=\"nx\">Google<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0632\u0645\u06cc\u0646\u0647 \u0628\u06cc\u0634\u062a\u0631\u060c \u0634\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{\n  &lt;prodiver_id&gt;: {\n    \"id\": &lt;provider_id&gt;\n    \"name\": &lt;provider_name&gt;\n    \"type\": &lt;provider_type&gt;\n    \"signinUrl\": &lt;provider signin url&gt;\n    \"callbackUrl\": &lt;provider callback url&gt;\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u060c \u0634\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"cognito_amazon\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n  <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"id\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"cognito_amazon\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"CognitoAmazon\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"oauth\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"signinUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/signin\/cognito_amazon\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"callbackUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/callback\/cognito_amazon\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"cognito_apple\"<\/span><span class=\"p\">:{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"cognito_apple\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"CognitoApple\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"oauth\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"signinUrl\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/signin\/cognito_apple\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"callbackUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/callback\/cognito_apple\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"cognito_facebook\"<\/span><span class=\"p\">:{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"cognito_facebook\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"CognitoFacebook\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"oauth\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"signinUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/signin\/cognito_facebook\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"callbackUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/callback\/cognito_facebook\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"cognito_google\"<\/span><span class=\"p\">:{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"id\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"cognito_google\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"CognitoGoogle\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span><span class=\"s2\">\"oauth\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"signinUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/signin\/cognito_google\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"callbackUrl\"<\/span><span class=\"p\">:<\/span><span class=\"w\">\n      <\/span><span class=\"s2\">\"http:\/\/localhost:3000\/api\/auth\/callback\/cognito_google\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Frontend_useSession_hook\"><\/span>\n<p>  Frontend useSession hook<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u0644\u0633\u0647 \u062f\u0631 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>useSession<\/code> \u0642\u0644\u0627\u0628 \u0627\u0632 <code>next-auth\/react<\/code>.<\/p>\n<p>\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u0644\u0633\u0647 \u0648 \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0642\u0644\u0627\u0628 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useSession<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next-auth\/react<\/span><span class=\"dl\">'<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f\u060c \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">status<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useSession<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0631\u0627 <code>data<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>session<\/code> \u067e\u0627\u0633\u062e \u062a\u0645\u0627\u0633\u06cc \u06a9\u0647 \u0645\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u06cc\u0645 <code>[...nextauth.ts]<\/code> .  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0627\u0636\u0627\u0641\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f <code>user<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644.<\/p>\n<p>\u0631\u0627 <code>status<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0631\u0634\u062a\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a.  \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u0622\u0646 &#8220;\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc&#8221;\u060c &#8220;\u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647&#8221; \u06cc\u0627 &#8220;\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0634\u062f\u0647&#8221; \u0627\u0633\u062a.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647 \u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u06cc\u0631 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 \u062c\u0644\u0633\u0647 \u0645\u0646\u0642\u0636\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633\u062a\u062e\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 AWS Cognito \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 AWS \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0647\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc \u06a9\u0647 \u0627\u0632 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0648\u0642\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0631\u0648\u06cc \u0632\u06cc\u0631\u0633\u0627\u062e\u062a AWS \u0645\u06cc\u200c\u0633\u0627\u0632\u0645\u060c \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u062f\u063a\u0627\u0645 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0622\u0646 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u06cc AWS \u0645\u0627\u0646\u0646\u062f \u0645\u062c\u0648\u0632 API Gateway\u060c &hellip;<\/p>\n","protected":false},"author":2,"featured_media":8404,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-8403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/8403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=8403"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/8403\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/8404"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=8403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=8403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=8403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}