From 8612d70ce3ad0cf86809212b98033ead0f59e413 Mon Sep 17 00:00:00 2001 From: Allan Zheng Date: Mon, 10 Mar 2025 18:21:34 -0700 Subject: [PATCH 1/2] fix(ssr): remove mentioning of internal packages --- .../server-side-rendering/nuxt/index.mdx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx b/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx index 687f3d730c1..40673741463 100644 --- a/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx +++ b/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx @@ -69,7 +69,7 @@ import { } from 'aws-amplify/auth'; import { list } from 'aws-amplify/storage'; import { generateClient } from 'aws-amplify/api'; -import outputs from '../amplify_outputs.json'; +import config from '../amplify_outputs.json'; const client = generateClient(); @@ -122,10 +122,6 @@ Example implementation: import type { CookieRef } from 'nuxt/app'; import type { Schema } from '~/amplify/data/resource'; import type { ListPaginateWithPathInput } from 'aws-amplify/storage'; -import type { - LibraryOptions, - FetchAuthSessionOptions -} from '@aws-amplify/core'; import { createKeyValueStorageFromCookieStorageAdapter, createUserPoolsTokenProvider, @@ -133,6 +129,7 @@ import { runWithAmplifyServerContext } from 'aws-amplify/adapter-core'; import { parseAmplifyConfig } from 'aws-amplify/utils'; +import type { FetchAuthSessionOptions } from 'aws-amplify/auth'; import { fetchAuthSession, fetchUserAttributes, @@ -141,10 +138,10 @@ import { import { list } from 'aws-amplify/storage/server'; import { generateClient } from 'aws-amplify/api/server'; -import outputs from '../amplify_outputs.json'; +import config from '../amplify_outputs.json'; // parse the content of `amplify_outputs.json` into the shape of ResourceConfig -const amplifyConfig = parseAmplifyConfig(outputs); +const amplifyConfig = parseAmplifyConfig(config); // create the Amplify used token cookies names array const userPoolClientId = amplifyConfig.Auth!.Cognito.userPoolClientId; @@ -273,7 +270,7 @@ export default defineNuxtPlugin({ ); // Create the libraryOptions object - const libraryOptions: LibraryOptions = { + const libraryOptions = { Auth: { tokenProvider, credentialsProvider @@ -423,7 +420,7 @@ Example implementation: ```ts title="plugins/02.authRedirect.ts" import { Amplify } from 'aws-amplify'; -import outputs from '~/amplify_outputs.json'; +import config from '~/amplify_outputs.json'; // Amplify.configure() only needs to be called on the client side if (process.client) { @@ -494,8 +491,7 @@ import { } from 'aws-amplify/adapter-core'; import { parseAmplifyConfig } from 'aws-amplify/utils'; -import type { LibraryOptions } from '@aws-amplify/core'; -import outputs from '~/amplify_outputs.json'; +import config from '~/amplify_outputs.json'; const amplifyConfig = parseAmplifyConfig(config); @@ -527,7 +523,7 @@ const createCookieStorageAdapter = ( const createLibraryOptions = ( event: H3Event -): LibraryOptions => { +) => { const cookieStorage = createCookieStorageAdapter(event); const keyValueStorage = createKeyValueStorageFromCookieStorageAdapter(cookieStorage); From 294838c5e75c9c31917a38b89b0fde34d259647e Mon Sep 17 00:00:00 2001 From: Allan Zheng Date: Tue, 11 Mar 2025 10:49:05 -0700 Subject: [PATCH 2/2] fix: address feedbacks --- .../server-side-rendering/nuxt/index.mdx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx b/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx index 40673741463..84f09d99ed7 100644 --- a/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx +++ b/src/pages/[platform]/build-a-backend/server-side-rendering/nuxt/index.mdx @@ -67,9 +67,10 @@ import { signIn, signOut } from 'aws-amplify/auth'; -import { list } from 'aws-amplify/storage'; import { generateClient } from 'aws-amplify/api'; -import config from '../amplify_outputs.json'; +import { list } from 'aws-amplify/storage'; + +import outputs from '../amplify_outputs.json'; const client = generateClient(); @@ -79,7 +80,7 @@ export default defineNuxtPlugin({ setup() { // This configures Amplify on the client side of your Nuxt app - Amplify.configure(config, { ssr: true }); + Amplify.configure(outputs, { ssr: true }); return { provide: { @@ -119,29 +120,30 @@ Make sure you call `Amplify.configure` as early as possible in your application Example implementation: ```ts title="plugins/01.amplifyApis.server.ts" +import type { FetchAuthSessionOptions } from 'aws-amplify/auth'; +import type { ListPaginateWithPathInput } from 'aws-amplify/storage'; import type { CookieRef } from 'nuxt/app'; import type { Schema } from '~/amplify/data/resource'; -import type { ListPaginateWithPathInput } from 'aws-amplify/storage'; + import { + createAWSCredentialsAndIdentityIdProvider, createKeyValueStorageFromCookieStorageAdapter, createUserPoolsTokenProvider, - createAWSCredentialsAndIdentityIdProvider, runWithAmplifyServerContext } from 'aws-amplify/adapter-core'; -import { parseAmplifyConfig } from 'aws-amplify/utils'; -import type { FetchAuthSessionOptions } from 'aws-amplify/auth'; +import { generateClient } from 'aws-amplify/api/server'; import { fetchAuthSession, fetchUserAttributes, getCurrentUser } from 'aws-amplify/auth/server'; import { list } from 'aws-amplify/storage/server'; -import { generateClient } from 'aws-amplify/api/server'; +import { parseAmplifyConfig } from 'aws-amplify/utils'; -import config from '../amplify_outputs.json'; +import outputs from '../amplify_outputs.json'; // parse the content of `amplify_outputs.json` into the shape of ResourceConfig -const amplifyConfig = parseAmplifyConfig(config); +const amplifyConfig = parseAmplifyConfig(outputs); // create the Amplify used token cookies names array const userPoolClientId = amplifyConfig.Auth!.Cognito.userPoolClientId; @@ -420,11 +422,12 @@ Example implementation: ```ts title="plugins/02.authRedirect.ts" import { Amplify } from 'aws-amplify'; -import config from '~/amplify_outputs.json'; + +import outputs from '~/amplify_outputs.json'; // Amplify.configure() only needs to be called on the client side if (process.client) { - Amplify.configure(config, { ssr: true }); + Amplify.configure(outputs, { ssr: true }); } export default defineNuxtPlugin({ @@ -481,19 +484,20 @@ Example implementation: ```ts title="utils/amplifyUtils.ts" import type { H3Event, EventHandlerRequest } from 'h3'; + import { + AmplifyServer, + CookieStorage, + createAWSCredentialsAndIdentityIdProvider, createKeyValueStorageFromCookieStorageAdapter, createUserPoolsTokenProvider, - createAWSCredentialsAndIdentityIdProvider, runWithAmplifyServerContext, - AmplifyServer, - CookieStorage } from 'aws-amplify/adapter-core'; import { parseAmplifyConfig } from 'aws-amplify/utils'; -import config from '~/amplify_outputs.json'; +import outputs from '~/amplify_outputs.json'; -const amplifyConfig = parseAmplifyConfig(config); +const amplifyConfig = parseAmplifyConfig(outputs); const createCookieStorageAdapter = ( event: H3Event @@ -567,6 +571,7 @@ Take implementing an API route `GET /api/current-user` , in `server/api/current- ```ts title="server/api/current-user.ts" import { getCurrentUser } from 'aws-amplify/auth/server'; + import { runAmplifyApi } from '~/server/utils/amplifyUtils'; export default defineEventHandler(async (event) => {