feat!: use hosted login for standalone apps (#386)

* feat!: use hosted login for standalone apps

* feat: set the timeout to 12 hours for local and dashboard

Author: ryanbonial

apps/kitchensink-react/src/ProjectAuthentication/ProjectAuthHome.tsx

@@ -1,5 +1,5 @@
-import {AuthBoundary} from '@sanity/sdk-react'
-import {Card, Flex, Text} from '@sanity/ui'
+import {AuthBoundary, useLogOut} from '@sanity/sdk-react'
+import {Button, Card, Flex, Text} from '@sanity/ui'
 import {type JSX} from 'react'
 import {Link} from 'react-router'
 
@@ -10,6 +10,7 @@ export function ProjectAuthHome({
 }: {
   routes: {path: string; element: JSX.Element}[]
 }): JSX.Element {
+  const logout = useLogOut()
   return (
     <PageLayout title="Authenticated" subtitle="Explore authentication examples and components">
       <AuthBoundary>
@@ -25,6 +26,9 @@ export function ProjectAuthHome({
               </Card>
             </Link>
           ))}
+          <Button mode="ghost" onClick={() => logout()}>
+            Logout
+          </Button>
         </Flex>
       </AuthBoundary>
     </PageLayout>

packages/core/src/_exports/index.ts

@@ -13,13 +13,12 @@ export {
   getAuthState,
   getCurrentUserState,
   getDashboardOrganizationId,
-  getLoginUrlsState,
+  getLoginUrlState,
   getTokenState,
   type LoggedInAuthState,
   type LoggedOutAuthState,
   type LoggingInAuthState,
 } from '../auth/authStore'
-export {fetchLoginUrls} from '../auth/fetchLoginUrls'
 export {handleAuthCallback} from '../auth/handleAuthCallback'
 export {logout} from '../auth/logout'
 export type {ClientStoreState as ClientState} from '../client/clientStore'

packages/core/src/auth/authStore.test.ts

@@ -10,10 +10,9 @@ import {
   getAuthState,
   getCurrentUserState,
   getDashboardOrganizationId,
-  getLoginUrlsState,
+  getLoginUrlState,
   getTokenState,
 } from './authStore'
-import {fetchLoginUrls} from './fetchLoginUrls'
 import {handleAuthCallback} from './handleAuthCallback'
 import {subscribeToStateAndFetchCurrentUser} from './subscribeToStateAndFetchCurrentUser'
 import {subscribeToStorageEventsAndSetToken} from './subscribeToStorageEventsAndSetToken'
@@ -297,38 +296,13 @@ describe('authStore', () => {
       instance?.dispose()
     })
 
-    it('returns the cached auth providers if present', async () => {
-      instance = createSanityInstance({
-        projectId: 'p',
-        dataset: 'd',
-        auth: {
-          providers: [{name: 'test', title: 'Test', url: 'https://example.com'}],
-          clientFactory: vi.fn().mockReturnValue({
-            request: vi.fn().mockResolvedValue({providers: []}),
-          }),
-        },
-      })
-
-      await fetchLoginUrls(instance)
-
-      const {getCurrent} = getLoginUrlsState(instance)
-      expect(getCurrent()).toEqual([
-        {
-          name: 'test',
-          title: 'Test',
-          url: 'https://example.com/?origin=http%3A%2F%2Flocalhost%2F&withSid=true&type=stampedToken',
-        },
-      ])
-
-      // pureness check
-      expect(getCurrent()).toBe(getCurrent())
-    })
-
-    it('returns nulls otherwise', () => {
+    it('returns the default login url', () => {
       instance = createSanityInstance({projectId: 'p', dataset: 'd'})
 
-      const loginUrlsState = getLoginUrlsState(instance)
-      expect(loginUrlsState.getCurrent()).toBe(null)
+      const loginUrlState = getLoginUrlState(instance)
+      expect(loginUrlState.getCurrent()).toBe(
+        'https://www.sanity.io/login?origin=http%3A%2F%2Flocalhost&type=stampedToken&withSid=true',
+      )
     })
   })
 

packages/core/src/auth/authStore.ts

@@ -73,6 +73,7 @@ export interface AuthStoreState {
     storageKey: string
     storageArea: Storage | undefined
     apiHost: string | undefined
+    loginUrl: string
     callbackUrl: string | undefined
     providedToken: string | undefined
   }
@@ -94,6 +95,20 @@ export const authStore = defineStore<AuthStoreState>({
 
     const storageKey = `__sanity_auth_token`
 
+    // This login URL will only be used for local development
+    let loginDomain = 'https://www.sanity.io'
+    try {
+      if (apiHost && new URL(apiHost).hostname.endsWith('.sanity.work')) {
+        loginDomain = 'https://www.sanity.work'
+      }
+    } catch {
+      /* empty */
+    }
+    const loginUrl = new URL('/login', loginDomain)
+    loginUrl.searchParams.set('origin', initialLocationHref)
+    loginUrl.searchParams.set('type', 'stampedToken') // Token must be stamped to have an sid passed back
+    loginUrl.searchParams.set('withSid', 'true')
+
     let authState: AuthState
 
     const token = getTokenFromStorage(storageArea, storageKey)
@@ -112,6 +127,7 @@ export const authStore = defineStore<AuthStoreState>({
       authState,
       options: {
         apiHost,
+        loginUrl: loginUrl.toString(),
         callbackUrl,
         customProviders,
         providedToken,
@@ -166,9 +182,9 @@ export const getTokenState = bindActionGlobally(
 /**
  * @public
  */
-export const getLoginUrlsState = bindActionGlobally(
+export const getLoginUrlState = bindActionGlobally(
   authStore,
-  createStateSourceAction(({state: {providers}}) => providers ?? null),
+  createStateSourceAction(({state: {options}}) => options.loginUrl),
 )
 
 /**