feat(SSR): withSSRContext

[ericclemmons]

Issue #, if available: #5435

This is an ☂️ PR that combines #5710 & #5450 to validate a withServerContext utility that scopes categories (e.g. Auth, and DataStore) to a single request.

• feat(@aws-amplify/auth): UniversalStorage for SSR #5710

• feat(@aws-amplify/datastore): Support SSR #5450

• Add withSSRContext(context) for new Auth & DataStore instances.

• Should DataStore's sync be scoped to this @manueliglesias?

• Set UniversalStorage adapter for Auth.

• Amplify.* properties are registered once.

• Rename withServerContext to withSSRContext

• Revert 123e90c

• Publish to a tag (e.g. preview) for testing.

• Notify customers in how to install & use.

• Fix references to await Auth.* that should use this.amplify.Auth or this.Credentials in DataStore's subscription.ts and GraphqlAPI.ts.

• Change Post.fromJSON to DataStore.fromJSON(Post, initialData.posts)

• Wait 2-4 weeks for incorporating customer feedback.

• Fix bug where federated sign in doesn't immediately set cookies.

• Passing test suite (makes more sense to solve this after changes)

• Ship to latest

• Update docs with Next.js “framework support”.

  • Note that import { Auth } is still entirely valid usage for SSR, so existing docs may not require huge changes.
  • However, authenticated requests will require withSSRContext usage, so this may be more of a callout/alert, similar to React Native special instructions.

Auth Example:

import { Amplify } from "aws-amplify"
import awsconfig from '../src/aws-exports'

Amplify.configure(awsconfig)

// On the client, `Auth` is configured to be "SSR-aware"
const { Auth } = withServerContext()

export default function Home({ user }) {
  if (!user) {
	return <Authenticator />
  }

  return <h1>Howdy, {user.attributes.email}!</h1>	
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // Server gets an instance of Auth scoped to this request (including cookies)
  const { Auth } = withServerContext(context)

  let user = null

  try {
    user = await Auth.currentAuthenticatedUser()
  } catch (error) {
	// Usually "not authenticated
    console.error(error)
  }

  return {
    props: {
      user: JSON.parse(JSON.stringify(user)),
    },
  }
}

DataStore Example:

import { Amplify, withServerContext } from 'aws-amplify';
import awsConfig from '../src/aws-exports';
import { Post, PostStatus } from '../src/models';

Amplify.configure(awsConfig);

export async function getServerSideProps(context) {
  const { DataStore, serializeModel } = withSSRContext(context);
  cosnt posts = await DataStore.query(Post)
  
  return {
    props: {
      posts: serializeModel(posts)
    }
  }
}

const { DataStore, deserializeModel } = withSSRContext();

function Page(initialData) {
  const [posts] = useState(deserializeModel(Post, initialData.posts));
  

I put logging into each DataStore and storage class to confirm new instantiations took place:

[ event ] build page: /
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results...
[ ready ] compiled successfully - ready on http://localhost:3000
NEW DataStore
NEW DataStore
NEW AsyncStorage
NEW StorageClass
NEW ExclusiveStorage
NEW AsyncStorage
NEW AsyncStorageDatabase
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results...
The schema has already been initialized


NEW PAGE ...

The schema has already been initialized
NEW DataStore
NEW StorageClass
NEW ExclusiveStorage
NEW AsyncStorage
NEW AsyncStorageDatabase


ANOTHER REFRESH

NEW DataStore
NEW StorageClass
NEW ExclusiveStorage
NEW AsyncStorage
NEW AsyncStorageDatabase

Between refreshes, the client will see (because it uses IndexedDB):

NEW DataStore
NEW StorageClass
NEW ExclusiveStorage

---

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[elorzafe]

👍 Thanks @ericclemmons !

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.