, ClientSafeProvider>
@@ -166,260 +284,99 @@ export async function signIn,
- options?: SignInOptions,
- authorizationParams?: SignInAuthorizationParams
+ options: SignInOptions = {},
+ authorizationParams: SignInAuthorizationParams = {}
): Promise
{
- const { callbackUrl = window.location.href, redirect = true } = options ?? {}
+ const { callbackUrl = window.location.href, redirect = true, ...opts } = options
- const __AUTHJS: AuthClientConfig = authConfigManager.getConfig()
+ const config = authConfigManager.getConfig()
- const href = `${__AUTHJS.baseUrl}${__AUTHJS.basePath}`
+ const href = `${config.baseUrl}${config.basePath}`
const providers = await getProviders()
-
if (!providers) {
window.location.href = `${href}/error`
return
}
if (!provider || !(provider in providers)) {
- window.location.href = `${href}/signin?${new URLSearchParams({
- callbackUrl,
- })}`
+ window.location.href = `${href}/signin?${new URLSearchParams({ callbackUrl })}`
return
}
const isCredentials = providers[provider].type === 'credentials'
const isEmail = providers[provider].type === 'email'
- const isSupportingReturn = isCredentials || isEmail
const signInUrl = `${href}/${isCredentials ? 'callback' : 'signin'}/${provider}`
const csrfToken = await getCsrfToken()
const res = await fetch(`${signInUrl}?${new URLSearchParams(authorizationParams)}`, {
- method: 'post',
+ method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Auth-Return-Redirect': '1',
},
- // @ts-expect-error TODO: Fix this
- body: new URLSearchParams({ ...options, csrfToken, callbackUrl }),
- credentials: __AUTHJS.credentials,
+ body: new URLSearchParams({ ...opts, csrfToken, callbackUrl }),
+ credentials: config.credentials,
})
- const data = await res.json()
+ const data = (await res.json()) as { url: string }
- // TODO: Do not redirect for Credentials and Email providers by default in next major
- if (redirect || !isSupportingReturn) {
- const url = (data as any).url ?? callbackUrl
+ if (redirect) {
+ const url = data.url ?? callbackUrl
window.location.href = url
- // If url contains a hash, the browser does not reload the page. We reload manually
+
if (url.includes('#')) {
window.location.reload()
}
return
}
- const error = new URL((data as any).url).searchParams.get('error')
+ const error = new URL(data.url).searchParams.get('error')
if (res.ok) {
- await __AUTHJS._getSession({ event: 'storage' })
+ await config.fetchSession?.({ event: 'storage' })
}
return {
error,
status: res.status,
ok: res.ok,
- url: error ? null : (data as any).url,
- } as any
+ url: error ? null : data.url,
+ } as P extends RedirectableProviderType ? SignInResponse : undefined
}
-/**
- * Initiate a signout, by destroying the current session.
- * Handles CSRF protection.
- */
export async function signOut(
options?: SignOutParams
): Promise {
- const { callbackUrl = window.location.href } = options ?? {}
- const __AUTHJS: AuthClientConfig = authConfigManager.getConfig()
- const href = `${__AUTHJS.baseUrl}${__AUTHJS.basePath}`
+ const { callbackUrl = window.location.href, redirect = true } = options ?? {}
+ const config = authConfigManager.getConfig()
+
const csrfToken = await getCsrfToken()
- const res = await fetch(`${href}/signout`, {
- method: 'post',
+ const res = await fetch(`${config.baseUrl}${config.basePath}/signout`, {
+ method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Auth-Return-Redirect': '1',
},
body: new URLSearchParams({ csrfToken, callbackUrl }),
- credentials: __AUTHJS.credentials,
+ credentials: config.credentials,
})
- const data = await res.json()
- broadcast().postMessage({ event: 'session', data: { trigger: 'signout' } })
+ const data = (await res.json()) as { url: string }
- if (options?.redirect ?? true) {
- const url = (data as any).url ?? callbackUrl
+ if (redirect) {
+ const url = data.url ?? callbackUrl
window.location.href = url
- // If url contains a hash, the browser does not reload the page. We reload manually
+
if (url.includes('#')) {
window.location.reload()
}
- // @ts-expect-error TODO: Fix this
- return
- }
- await __AUTHJS._getSession({ event: 'storage' })
-
- return data as any
-}
-
-export function SessionProvider(props: SessionProviderProps) {
- if (!SessionContext) {
- throw new Error('React Context is unavailable in Server Components')
+ return undefined as R extends true ? undefined : SignOutResponse
}
- const { children, refetchInterval, refetchWhenOffline } = props
-
- const __AUTHJS: AuthClientConfig = authConfigManager.getConfig()
-
- const hasInitialSession = props.session !== undefined
-
- __AUTHJS._lastSync = hasInitialSession ? now() : 0
-
- const [session, setSession] = React.useState(() => {
- if (hasInitialSession) {
- __AUTHJS._session = props.session
- }
- return props.session
- })
-
- const [loading, setLoading] = React.useState(!hasInitialSession)
-
- React.useEffect(() => {
- __AUTHJS._getSession = async ({ event } = {}) => {
- try {
- const storageEvent = event === 'storage'
-
- if (storageEvent || __AUTHJS._session === undefined) {
- __AUTHJS._lastSync = now()
- __AUTHJS._session = await getSession({
- broadcast: !storageEvent,
- })
- setSession(__AUTHJS._session)
- return
- }
-
- if (
- // If there is no time defined for when a session should be considered
- // stale, then it's okay to use the value we have until an event is
- // triggered which updates it
- !event ||
- // If the client doesn't have a session then we don't need to call
- // the server to check if it does (if they have signed in via another
- // tab or window that will come through as a "stroage" event
- // event anyway)
- __AUTHJS._session === null ||
- // Bail out early if the client session is not stale yet
- now() < __AUTHJS._lastSync
- ) {
- return
- }
-
- // An event or session staleness occurred, update the client session.
- __AUTHJS._lastSync = now()
- __AUTHJS._session = await getSession()
- setSession(__AUTHJS._session)
- } catch (error) {
- logger.error(new ClientSessionError((error as Error).message, error as any))
- } finally {
- setLoading(false)
- }
- }
-
- __AUTHJS._getSession()
-
- return () => {
- __AUTHJS._lastSync = 0
- __AUTHJS._session = undefined
- __AUTHJS._getSession = () => {}
- }
- }, [])
-
- React.useEffect(() => {
- const handle = () => __AUTHJS._getSession({ event: 'storage' })
- // Listen for storage events and update session if event fired from
- // another window (but suppress firing another event to avoid a loop)
- // Fetch new session data but tell it to not to fire another event to
- // avoid an infinite loop.
- // Note: We could pass session data through and do something like
- // `setData(message.data)` but that can cause problems depending
- // on how the session object is being used in the client; it is
- // more robust to have each window/tab fetch it's own copy of the
- // session object rather than share it across instances.
- broadcast().addEventListener('message', handle)
- return () => broadcast().removeEventListener('message', handle)
- }, [])
-
- React.useEffect(() => {
- const { refetchOnWindowFocus = true } = props
- // Listen for when the page is visible, if the user switches tabs
- // and makes our tab visible again, re-fetch the session, but only if
- // this feature is not disabled.
- const visibilityHandler = () => {
- if (refetchOnWindowFocus && document.visibilityState === 'visible') {
- __AUTHJS._getSession({ event: 'visibilitychange' })
- }
- }
- document.addEventListener('visibilitychange', visibilityHandler, false)
- return () => document.removeEventListener('visibilitychange', visibilityHandler, false)
- }, [props.refetchOnWindowFocus])
-
- const isOnline = useOnline()
- // TODO: Flip this behavior in next major version
- const shouldRefetch = refetchWhenOffline !== false || isOnline
-
- React.useEffect(() => {
- if (refetchInterval && shouldRefetch) {
- const refetchIntervalTimer = setInterval(() => {
- if (__AUTHJS._session) {
- __AUTHJS._getSession({ event: 'poll' })
- }
- }, refetchInterval * 1000)
- return () => clearInterval(refetchIntervalTimer)
- }
- }, [refetchInterval, shouldRefetch])
-
- const value: any = React.useMemo(
- () => ({
- data: session,
- status: loading ? 'loading' : session ? 'authenticated' : 'unauthenticated',
- async update(data: any) {
- if (loading || !session) {
- return
- }
- setLoading(true)
- const newSession = await fetchData(
- 'session',
- __AUTHJS,
- logger,
- typeof data === 'undefined'
- ? undefined
- : { body: { csrfToken: await getCsrfToken(), data } }
- )
- setLoading(false)
- if (newSession) {
- setSession(newSession)
- broadcast().postMessage({
- event: 'session',
- data: { trigger: 'getSession' },
- })
- }
- return newSession
- },
- }),
- [session, loading]
- )
+ await config.fetchSession?.({ event: 'storage' })
- return {children}
+ return data as R extends true ? undefined : SignOutResponse
}
diff --git a/packages/auth-js/test/index.test.ts b/packages/auth-js/test/index.test.ts
index 1199bead8..96670145d 100644
--- a/packages/auth-js/test/index.test.ts
+++ b/packages/auth-js/test/index.test.ts
@@ -186,9 +186,14 @@ describe('Credentials Provider', () => {
headers,
})
expect(res.status).toBe(200)
- const obj = await res.json()
- expect(obj['token']['name']).toBe(user.name)
- expect(obj['token']['email']).toBe(user.email)
+ const obj = await res.json<{
+ token: {
+ name: string
+ email: string
+ }
+ }>()
+ expect(obj.token.name).toBe(user.name)
+ expect(obj.token.email).toBe(user.email)
})
it('Should respect x-forwarded-proto and x-forwarded-host', async () => {
@@ -198,7 +203,7 @@ describe('Credentials Provider', () => {
const res = await app.request('http://localhost/api/auth/signin', {
headers,
})
- let html = await res.text()
+ const html = await res.text()
expect(html).toContain('action="https://example.com/api/auth/callback/credentials"')
})
})