Skip to content

Federated signin user not authenticaed in ssr nextjs 13 app directory #12603

Open
@Danish-karim

Description

@Danish-karim

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

System:
OS: Windows 11 10.0.22621
CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
Memory: 1.02 GB / 7.88 GB
Binaries:
Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (119.0.2151.44)
Internet Explorer: 11.0.22621.1
npmPackages:
@ampproject/toolbox-optimizer: undefined ()
@babel/core: undefined ()
@babel/runtime: 7.15.4
@edge-runtime/cookies: 3.3.0
@edge-runtime/ponyfill: 2.3.0
@edge-runtime/primitives: 3.0.4
@hapi/accept: undefined ()
@hookform/resolvers: ^3.3.2 => 3.3.2
@hookform/resolvers/ajv: 1.0.0
@hookform/resolvers/arktype: 1.0.0
@hookform/resolvers/class-validator: 1.0.0
@hookform/resolvers/computed-types: 1.0.0
@hookform/resolvers/io-ts: 1.0.0
@hookform/resolvers/joi: 1.0.0
@hookform/resolvers/nope: 1.0.0
@hookform/resolvers/superstruct: 1.0.0
@hookform/resolvers/typanion: 1.0.0
@hookform/resolvers/typebox: 1.0.0
@hookform/resolvers/valibot: 1.0.0
@hookform/resolvers/vest: 1.0.0
@hookform/resolvers/yup: 1.0.0
@hookform/resolvers/zod: 1.0.0
@mswjs/interceptors: undefined ()
@napi-rs/triples: undefined ()
@next/font: undefined ()
@next/react-dev-overlay: undefined ()
@opentelemetry/api: undefined ()
@segment/ajv-human-errors: undefined ()
@types/node: 20.6.2 => 20.6.2 (20.9.3)
@types/prismjs: ^1.26.3 => 1.26.3
@types/react: 18.2.21 => 18.2.21 (18.2.38)
@types/react-color: ^3.0.10 => 3.0.10
@types/react-dom: 18.2.7 => 18.2.7
@vercel/nft: undefined ()
@vercel/og: undefined ()
acorn: undefined ()
alpinejs: ^3.13.2 => 3.13.3
amphtml-validator: undefined ()
anser: undefined ()
arg: undefined ()
assert: undefined ()
async-retry: undefined ()
async-sema: undefined ()
autoprefixer: ^10.4.15 => 10.4.16
aws-amplify: ^5.3.11 => 5.3.12
babel-packages: undefined ()
browserify-zlib: undefined ()
browserslist: undefined ()
buffer: undefined ()
bytes: undefined ()
chalk: undefined ()
ci-info: undefined ()
cli-select: undefined ()
client-only: 0.0.1
comment-json: undefined ()
compression: undefined ()
conf: undefined ()
constants-browserify: undefined ()
content-disposition: undefined ()
content-type: undefined ()
cookie: undefined ()
cross-spawn: undefined ()
crypto-browserify: undefined ()
css.escape: undefined ()
data-uri-to-buffer: undefined ()
debug: undefined ()
devalue: undefined ()
domain-browser: undefined ()
edge-runtime: undefined ()
eslint: 8.49.0 => 8.49.0
eslint-config-next: 13.4.19 => 13.4.19
events: undefined ()
find-cache-dir: undefined ()
find-up: undefined ()
fresh: undefined ()
get-orientation: undefined ()
glob: undefined ()
gzip-size: undefined ()
http-proxy: undefined ()
http-proxy-agent: undefined ()
https-browserify: undefined ()
https-proxy-agent: undefined ()
icss-utils: undefined ()
ignore-loader: undefined ()
image-size: undefined ()
is-animated: undefined ()
is-docker: undefined ()
is-wsl: undefined ()
jest-docblock: undefined ()
jest-worker: undefined ()
json5: undefined ()
jsonwebtoken: undefined ()
loader-runner: undefined ()
loader-utils: undefined ()
lodash.curry: undefined ()
lru-cache: undefined ()
micromatch: undefined ()
mini-css-extract-plugin: undefined ()
nanoid: undefined ()
native-url: undefined ()
neo-async: undefined ()
next: 13.4.19 => 13.4.19
node-fetch: undefined ()
node-html-parser: undefined ()
ora: undefined ()
os-browserify: undefined ()
p-limit: undefined ()
path-browserify: undefined ()
platform: undefined ()
postcss: ^8.4.29 => 8.4.31 (8.4.14)
postcss-flexbugs-fixes: undefined ()
postcss-modules-extract-imports: undefined ()
postcss-modules-local-by-default: undefined ()
postcss-modules-scope: undefined ()
postcss-modules-values: undefined ()
postcss-preset-env: undefined ()
postcss-safe-parser: undefined ()
postcss-scss: undefined ()
postcss-value-parser: undefined ()
prismjs: ^1.29.0 => 1.29.0
process: undefined ()
punycode: undefined ()
querystring-es3: undefined ()
raw-body: undefined ()
react: 18.2.0 => 18.2.0
react-builtin: undefined ()
react-color: ^2.19.3 => 2.19.3
react-dom: 18.2.0 => 18.2.0
react-dom-builtin: undefined ()
react-dom-experimental-builtin: undefined ()
react-experimental-builtin: undefined ()
react-hook-form: ^7.47.0 => 7.48.2
react-icons: ^4.11.0 => 4.12.0
react-is: 18.2.0
react-refresh: 0.12.0
react-server-dom-webpack-builtin: undefined ()
react-server-dom-webpack-experimental-builtin: undefined ()
react-toastify: ^9.1.3 => 9.1.3
regenerator-runtime: 0.13.4
sass-loader: undefined ()
scheduler-builtin: undefined ()
scheduler-experimental-builtin: undefined ()
schema-utils: undefined ()
semver: undefined ()
send: undefined ()
server-only: 0.0.1
setimmediate: undefined ()
shell-quote: undefined ()
source-map: undefined ()
stacktrace-parser: undefined ()
stream-browserify: undefined ()
stream-http: undefined ()
string-hash: undefined ()
string_decoder: undefined ()
strip-ansi: undefined ()
tailwindcss: ^3.3.3 => 3.3.5
tar: undefined ()
terser: undefined ()
text-table: undefined ()
timers-browserify: undefined ()
tty-browserify: undefined ()
typescript: 5.2.2 => 5.2.2
ua-parser-js: undefined ()
undici: undefined ()
unistore: undefined ()
util: undefined ()
vm-browserify: undefined ()
watchpack: undefined ()
web-vitals: undefined ()
webpack: undefined ()
webpack-sources: undefined ()
ws: undefined ()
yup: ^1.3.2 => 1.3.2
zod: undefined ()
npmGlobalPackages:
@aws-amplify/cli: 11.1.1
amplify-graphql-seed-plugin: 0.1.13
corepack: 0.10.0
create-next-app: 13.3.0
env-cmd: 10.1.0
jest: 29.3.1
nodemon: 2.0.22
npm-check-updates: 16.10.9
npm: 8.11.0
typescript: 4.9.4
yarn: 1.22.19

Describe the bug

federated login works fine for the cognito signin but unable to authenticate federated user in server side components in nextjs 13 app directory...if we convert the components from server side to client side its working fine.below are the nextjs and amplify version i am using.

aws-amplify: "^5.3.11",
next: "13.4.19"

below is the documentation i followed to add federated signin functionality
https://docs.amplify.aws/javascript/prev/build-a-backend/server-side-rendering/

Expected behavior

should provide me with the user information on signin.

Reproduction steps

using aws amplify auth from aws-amplify and CognitoHostedUIIdentityProvider from "@aws-amplify/auth" for doing federated signin ...after signin go to the ssr protected page and it doesnt provide with the user info ....retuens message "no authenticated user".

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line


aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

Metadata

Metadata

Assignees

Labels

CognitoRelated to cognito issuesNext.jsSSRIssues related to Server Side RenderingService TeamIssues asked to the Service TeamV5feature-requestRequest a new feature

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions