Merge pull request #273 from atls/feat/identity-integration-pages-router

feat(identity-integration): app and pages router

.yarnrc.yml

@@ -5,3 +5,9 @@ enableGlobalCache: true
 globalFolder: ../.yarn/berry
 
 yarnPath: .yarn/releases/yarn.cjs
+
+preferReuse: true
+
+defaultSemverRangePrefix: ''
+
+pnpEnableEsmLoader: true

packages/identity-integration/README.md

@@ -1,5 +1,11 @@
 # Identity Integration
 
+## BREAKING CHANGE 1.0.0
+
+- Flow экспортируются:
+  - `@atls/next-identity-integration/app-router` - для `app` роутера
+  - `@atls/next-identity-integration/page-router` - для `pages` роутера
+
 ## BREAKING CHANGE 0.2.0
 
 - Переход на `App Router` для `Next.JS@14`

packages/identity-integration/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@atls/next-identity-integration",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "license": "BSD-3-Clause",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json",
+    "./app-router": "./src/app-router.ts",
+    "./page-router": "./src/page-router.ts"
+  },
   "main": "src/index.ts",
   "files": [
     "dist"
@@ -12,26 +19,44 @@
     "postpack": "rm -rf dist"
   },
   "dependencies": {
-    "@ory/client": "1.2.11",
-    "@ory/integrations": "1.1.5",
-    "@ory/kratos-client": "1.0.0",
-    "@types/tldjs": "2.3.4",
+    "@ory/client": "1.14.5",
+    "@ory/integrations": "1.2.1",
+    "@ory/kratos-client": "1.2.1",
     "tldjs": "2.3.1"
   },
   "devDependencies": {
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.10",
-    "axios": "1.5.1",
-    "next": "14.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@types/tldjs": "2.3.4",
+    "axios": "1.7.7",
+    "next": "14.2.9",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "peerDependencies": {
     "next": "^14.1.0",
     "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public",
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "./app-router": {
+        "import": "./dist/app-router.js",
+        "types": "./dist/app-router.d.ts",
+        "default": "./dist/app-router.js"
+      },
+      "./page-router": {
+        "import": "./dist/page-router.js",
+        "types": "./dist/page-router.d.ts",
+        "default": "./dist/page-router.js"
+      }
+    },
     "main": "dist/index.js",
     "typings": "dist/index.d.ts"
   },

packages/identity-integration/src/app-router.ts

@@ -0,0 +1 @@
+export * from './flows-app-router/index.js'

packages/identity-integration/src/flows/error.flow.tsx → packages/identity-integration/src/flows-app-router/error.flow.tsx

@@ -1,15 +1,16 @@
-import { FlowError }         from '@ory/kratos-client'
-import { AxiosError }        from 'axios'
-import { PropsWithChildren } from 'react'
-import { FC }                from 'react'
-import { useRouter }         from 'next/navigation'
-import { useSearchParams }   from 'next/navigation'
-import { useState }          from 'react'
-import { useEffect }         from 'react'
-import React                 from 'react'
-
-import { ErrorProvider }     from '../providers'
-import { useKratosClient }   from '../providers'
+import type { FlowError }         from '@ory/kratos-client'
+import type { AxiosError }        from 'axios'
+import type { PropsWithChildren } from 'react'
+import type { FC }                from 'react'
+
+import { useRouter }              from 'next/navigation.js'
+import { useSearchParams }        from 'next/navigation.js'
+import { useState }               from 'react'
+import { useEffect }              from 'react'
+import React                      from 'react'
+
+import { ErrorProvider }          from '../providers/index.js'
+import { useKratosClient }        from '../providers/index.js'
 
 export interface ErrorErrorProps {
   returnToUrl?: string

packages/identity-integration/src/flows/handle-errors.util.ts → packages/identity-integration/src/flows-app-router/handle-errors.util.ts

@@ -2,10 +2,10 @@
 /* eslint-disable prefer-template */
 /* eslint-disable default-case */
 
-import { AxiosError }        from 'axios'
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
-import { Dispatch }          from 'react'
-import { SetStateAction }    from 'react'
+import type { AxiosError }        from 'axios'
+import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime.js'
+import type { Dispatch }          from 'react'
+import type { SetStateAction }    from 'react'
 
 export const handleFlowError = <S>(
     router: AppRouterInstance,

packages/identity-integration/src/flows-app-router/index.ts

@@ -0,0 +1,7 @@
+export * from './verification.flow.js'
+export * from './registration.flow.js'
+export * from './recovery.flow.js'
+export * from './settings.flow.js'
+export * from './login.flow.js'
+export * from './error.flow.js'
+export * from './logout.flow.js'

packages/identity-integration/src/flows/login.flow.tsx → packages/identity-integration/src/flows-app-router/login.flow.tsx

@@ -1,22 +1,23 @@
-import { UpdateLoginFlowBody }          from '@ory/kratos-client'
-import { LoginFlow as KratosLoginFlow } from '@ory/kratos-client'
-import { AxiosError }                   from 'axios'
-import { PropsWithChildren }            from 'react'
-import { FC }                           from 'react'
-import { useSearchParams }              from 'next/navigation'
-import { useRouter }                    from 'next/navigation'
-import { useState }                     from 'react'
-import { useEffect }                    from 'react'
-import { useMemo }                      from 'react'
-import { useCallback }                  from 'react'
-import React                            from 'react'
-
-import { FlowProvider }                 from '../providers'
-import { ValuesProvider }               from '../providers'
-import { ValuesStore }                  from '../providers'
-import { SubmitProvider }               from '../providers'
-import { useKratosClient }              from '../providers'
-import { handleFlowError }              from './handle-errors.util'
+import type { UpdateLoginFlowBody }          from '@ory/kratos-client'
+import type { LoginFlow as KratosLoginFlow } from '@ory/kratos-client'
+import type { AxiosError }                   from 'axios'
+import type { PropsWithChildren }            from 'react'
+import type { FC }                           from 'react'
+
+import { useSearchParams }                   from 'next/navigation.js'
+import { useRouter }                         from 'next/navigation.js'
+import { useState }                          from 'react'
+import { useEffect }                         from 'react'
+import { useMemo }                           from 'react'
+import { useCallback }                       from 'react'
+import React                                 from 'react'
+
+import { FlowProvider }                      from '../providers/index.js'
+import { ValuesProvider }                    from '../providers/index.js'
+import { ValuesStore }                       from '../providers/index.js'
+import { SubmitProvider }                    from '../providers/index.js'
+import { useKratosClient }                   from '../providers/index.js'
+import { handleFlowError }                   from './handle-errors.util.js'
 
 export interface LoginFlowProps {
   onError?: (error: { id: string }) => void
@@ -92,6 +93,7 @@ export const LoginFlow: FC<PropsWithChildren<LoginFlowProps>> = ({
 
       kratosClient
         .updateLoginFlow(
+          // @ts-ignore
           { flow: String(flow?.id), updateLoginFlowBody: body },
           { withCredentials: true }
         )
@@ -122,6 +124,7 @@ export const LoginFlow: FC<PropsWithChildren<LoginFlowProps>> = ({
   return (
     <FlowProvider value={{ flow, loading }}>
       <ValuesProvider value={values}>
+        {/* @ts-ignore */}
         <SubmitProvider value={{ submitting, onSubmit }}>{children}</SubmitProvider>
       </ValuesProvider>
     </FlowProvider>

packages/identity-integration/src/flows/logout.flow.tsx → packages/identity-integration/src/flows-app-router/logout.flow.tsx

@@ -1,14 +1,15 @@
-import { LogoutFlow as KratosLogoutFlow } from '@ory/kratos-client'
-import { AxiosError }                     from 'axios'
-import { PropsWithChildren }              from 'react'
-import { FC }                             from 'react'
-import { useSearchParams }                from 'next/navigation'
-import { useRouter }                      from 'next/navigation'
-import { useState }                       from 'react'
-import { useEffect }                      from 'react'
-import React                              from 'react'
-
-import { useKratosClient }                from '../providers'
+import type { LogoutFlow as KratosLogoutFlow } from '@ory/kratos-client'
+import type { AxiosError }                     from 'axios'
+import type { PropsWithChildren }              from 'react'
+import type { FC }                             from 'react'
+
+import { useSearchParams }                    from 'next/navigation.js'
+import { useRouter }                          from 'next/navigation.js'
+import { useState }                           from 'react'
+import { useEffect }                          from 'react'
+import React                                   from 'react'
+
+import { useKratosClient }                     from '../providers/index.js'
 
 interface LogoutFlowProps {
   returnToUrl?: string

packages/identity-integration/src/flows/recovery.flow.tsx → packages/identity-integration/src/flows-app-router/recovery.flow.tsx

@@ -1,22 +1,23 @@
-import { UpdateRecoveryFlowBody }             from '@ory/kratos-client'
-import { RecoveryFlow as KratosRecoveryFlow } from '@ory/kratos-client'
-import { AxiosError }                         from 'axios'
-import { PropsWithChildren }                  from 'react'
-import { FC }                                 from 'react'
-import { useSearchParams }                    from 'next/navigation'
-import { useRouter }                          from 'next/navigation'
-import { useState }                           from 'react'
-import { useEffect }                          from 'react'
-import { useMemo }                            from 'react'
-import { useCallback }                        from 'react'
-import React                                  from 'react'
-
-import { FlowProvider }                       from '../providers'
-import { ValuesProvider }                     from '../providers'
-import { ValuesStore }                        from '../providers'
-import { SubmitProvider }                     from '../providers'
-import { useKratosClient }                    from '../providers'
-import { handleFlowError }                    from './handle-errors.util'
+import type { UpdateRecoveryFlowBody }             from '@ory/kratos-client'
+import type { RecoveryFlow as KratosRecoveryFlow } from '@ory/kratos-client'
+import type { AxiosError }                         from 'axios'
+import type { PropsWithChildren }                  from 'react'
+import type { FC }                                 from 'react'
+
+import { useSearchParams }                         from 'next/navigation.js'
+import { useRouter }                               from 'next/navigation.js'
+import { useState }                                from 'react'
+import { useEffect }                               from 'react'
+import { useMemo }                                 from 'react'
+import { useCallback }                             from 'react'
+import React                                       from 'react'
+
+import { FlowProvider }                            from '../providers/index.js'
+import { ValuesProvider }                          from '../providers/index.js'
+import { ValuesStore }                             from '../providers/index.js'
+import { SubmitProvider }                          from '../providers/index.js'
+import { useKratosClient }                         from '../providers/index.js'
+import { handleFlowError }                         from './handle-errors.util.js'
 
 export interface RecoveryFlowProps {
   onError?: (error: { id: string }) => void
@@ -100,6 +101,7 @@ export const RecoveryFlow: FC<PropsWithChildren<RecoveryFlowProps>> = ({
 
       kratosClient
         .updateRecoveryFlow(
+          // @ts-ignore
           { flow: String(flow?.id), updateRecoveryFlowBody: body },
           { withCredentials: true }
         )

packages/identity-integration/src/flows/registration.flow.tsx → packages/identity-integration/src/flows-app-router/registration.flow.tsx

@@ -1,25 +1,26 @@
-import { Identity }                                   from '@ory/kratos-client'
-import { UpdateRegistrationFlowBody }                 from '@ory/kratos-client'
-import { RegistrationFlow as KratosRegistrationFlow } from '@ory/kratos-client'
-import { ContinueWith as KratosContinueWith }         from '@ory/kratos-client'
-import { UiNodeInputAttributes }                      from '@ory/kratos-client'
-import { AxiosError }                                 from 'axios'
-import { PropsWithChildren }                          from 'react'
-import { FC }                                         from 'react'
-import { useSearchParams }                            from 'next/navigation'
-import { useRouter }                                  from 'next/navigation'
-import { useState }                                   from 'react'
-import { useEffect }                                  from 'react'
-import { useMemo }                                    from 'react'
-import { useCallback }                                from 'react'
-import React                                          from 'react'
-
-import { FlowProvider }                               from '../providers'
-import { ValuesProvider }                             from '../providers'
-import { ValuesStore }                                from '../providers'
-import { SubmitProvider }                             from '../providers'
-import { useKratosClient }                            from '../providers'
-import { handleFlowError }                            from './handle-errors.util'
+import type { Identity }                                   from '@ory/kratos-client'
+import type { UpdateRegistrationFlowBody }                 from '@ory/kratos-client'
+import type { RegistrationFlow as KratosRegistrationFlow } from '@ory/kratos-client'
+import type { ContinueWith as KratosContinueWith }         from '@ory/kratos-client'
+import type { UiNodeInputAttributes }                      from '@ory/kratos-client'
+import type { AxiosError }                                 from 'axios'
+import type { PropsWithChildren }                          from 'react'
+import type { FC }                                         from 'react'
+
+import { useSearchParams }                                 from 'next/navigation.js'
+import { useRouter }                                       from 'next/navigation.js'
+import { useState }                                        from 'react'
+import { useEffect }                                       from 'react'
+import { useMemo }                                         from 'react'
+import { useCallback }                                     from 'react'
+import React                                               from 'react'
+
+import { FlowProvider }                                    from '../providers/index.js'
+import { ValuesProvider }                                  from '../providers/index.js'
+import { ValuesStore }                                     from '../providers/index.js'
+import { SubmitProvider }                                  from '../providers/index.js'
+import { useKratosClient }                                 from '../providers/index.js'
+import { handleFlowError }                                 from './handle-errors.util.js'
 
 export interface RegistrationFlowProps {
   onError?: (error: { id: string }) => void
@@ -32,7 +33,7 @@ type ContinueWith = KratosContinueWith & {
   flow?: {
     id: string
     url?: string
-    verifiable_address: string
+    verifiable_address?: string
   }
 }
 
@@ -124,6 +125,7 @@ export const RegistrationFlow: FC<PropsWithChildren<RegistrationFlowProps>> = ({
 
       kratosClient
         .updateRegistrationFlow(
+          // @ts-ignore
           { flow: String(flow?.id), updateRegistrationFlowBody: body },
           { withCredentials: true }
         )
@@ -146,7 +148,8 @@ export const RegistrationFlow: FC<PropsWithChildren<RegistrationFlowProps>> = ({
                 const url = new URL(continueWithAction.flow.url)
                 const params = url.searchParams
                 const email = continueWithAction.flow.verifiable_address
-                params.set('email', email)
+                if (email) params.set('email', email)
+
                 const newUrlString = `${url.origin}${url.pathname}?${params.toString()}`
                 router.push(newUrlString)
               } else {
@@ -177,6 +180,7 @@ export const RegistrationFlow: FC<PropsWithChildren<RegistrationFlowProps>> = ({
   return (
     <FlowProvider value={{ flow, loading, identity, isValid }}>
       <ValuesProvider value={values}>
+        {/* @ts-ignore */}
         <SubmitProvider value={{ submitting, onSubmit }}>{children}</SubmitProvider>
       </ValuesProvider>
     </FlowProvider>