@authing/guard-shim-react18 5.0.8-alpha.1 → 5.0.8-alpha.10

package/package.json

@@ -1,33 +1,34 @@
 {
   "name": "@authing/guard-shim-react18",
-  "version": "5.0.8-alpha.1",
+  "version": "5.0.8-alpha.10",
   "description": "Guard shim for react18",
-  "main": "src/index.tsx",
+  "module": "dist/esm/guard.min.js",
+  "types": "dist/typings/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "autoinstall": "npm ci",
-    "build": "echo 'No need to build for @authing/guard-shim-react18'",
+    "build": "node scripts/build.js",
     "lint": "eslint --ext .ts,.tsx src/**",
     "lint:fix": "eslint --fix --ext .ts,.tsx src/**",
     "release:official": "npm publish --verbose --access public",
     "release:alpha": "npm publish --verbose --tag=alpha --access public"
   },
   "devDependencies": {
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
     "css-loader": "^6.7.1",
     "mini-css-extract-plugin": "^2.6.1",
     "rimraf": "^2.6.2",
     "ts-loader": "^9.3.1",
     "webpack": "^5.72.0"
   },
-  "peerDependencies": {
-    "axios": "^0.27.2",
+  "dependencies": {
+    "@authing/react18-ui-components": "^4.1.0-alpha.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "dependencies": {
-    "@authing/react18-components": "^4.1.0-alpha.0"
-  },
   "author": "https://github.com/authing",
   "license": "MIT",
   "publishConfig": {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Authing
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,3 +0,0 @@
-# @authing/guard-shim-react18
-
-Be only used for internal

package/scripts/build.js

@@ -1,22 +0,0 @@
-const path = require('path')
-const rm = require('rimraf')
-const webpack = require('webpack')
-const webpackEsmBundlerConfig = require('./webpack.esm.config')
-
-try {
-  rm.sync(path.resolve(__dirname, '../', 'dist'))
-} catch (e) {
-  console.error('\n\n build guard, failed to delete dist directory, please operate manually \n\n')
-}
-
-readyGo()
-
-function readyGo () {
-  webpack(webpackEsmBundlerConfig, (error, stats) => {
-    if (error) {
-      console.error('build guard-shim-react18 esm bundler error: ', error)
-    } else {
-      console.log(stats)
-    }
-  })
-}

package/scripts/webpack.esm.config.js

@@ -1,42 +0,0 @@
-const path = require('path')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-function resolve (dir, file = '') {
-  return path.resolve(__dirname, '../', dir, file)
-}
-
-module.exports = {
-  mode: 'production',
-  entry: resolve('src/index.tsx'),
-  output: {
-    filename: 'guard.min.js',
-    path: resolve('dist/esm'),
-    library: {
-      type: 'module'
-    }
-  },
-  experiments: {
-    outputModule: true
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
-      },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'guard.min.css'
-    })
-  ]
-}

package/src/index.tsx

@@ -1,515 +0,0 @@
-import React from 'react'
-
-import { createRoot, Root } from 'react-dom/client'
-
-import {
-  GuardOptions,
-  GuardMode,
-  GuardEventsCamelToKebabMapping,
-  GuardLocalConfig,
-  GuardEventListeners,
-  GuardEvents,
-  Guard as ReactAuthingGuard,
-  GuardEventsKebabToCamelType,
-  StartWithRedirectOptions,
-  AuthenticationClient,
-  JwtTokenStatus,
-  User,
-  GuardModuleType,
-  Lang,
-  IGuardConfig
-} from './types'
-
-import '@authing/react18-components/lib/index.min.css'
-
-export * from './types'
-
-const isDef = (value: unknown) => value !== undefined
-
-export class Guard {
-  public options: GuardOptions
-
-  private visible = false
-
-  private then: () => Promise<any | never>
-
-  private publicConfig?: Record<string, unknown>
-
-  private root?: Root
-
-  constructor(options: GuardOptions) {
-    if (!options.appId) {
-      throw new Error('appId is required')
-    }
-
-    const config = {
-      ...options.config
-    }
-
-    this.options = this.adaptOptions(options, config)
-
-    const init = (async () => {
-      if (this.publicConfig) {
-        return this.publicConfig
-      }
-
-      const publicConfigRes = await this.getPublicConfig()
-
-      return (this.publicConfig = publicConfigRes.data)
-    })()
-
-    this.then = init.then.bind(init)
-
-    this.visible = !!(options.mode === GuardMode.Modal)
-  }
-
-  private adaptOptions(options: GuardOptions, config: Partial<IGuardConfig>) {
-    options.host = options.host || ''
-
-    if (isDef(options.isSSO)) {
-      config.isSSO = options.isSSO
-    }
-
-    if (isDef(options.defaultScene)) {
-      // @ts-ignore
-      config.defaultScenes = options.defaultScene
-    }
-
-    if (isDef(options.lang)) {
-      config.lang = options.lang
-    }
-
-    if (isDef(options.host)) {
-      config.host = options.host
-    }
-
-    if (isDef(options.mode)) {
-      // @ts-ignore
-      config.mode = options.mode
-    }
-
-    options.config = config
-
-    if (isDef(options.config.socialConnectionList)) {
-      // @ts-ignore
-      options.config.socialConnections = options.config.socialConnectionList
-    }
-
-    if (isDef(options.config.loginMethod)) {
-      // @ts-ignore
-      options.config.defaultLoginMethod = options.config.loginMethod
-    }
-
-    if (isDef(options.config.loginMethodList)) {
-      // @ts-ignore
-      options.config.loginMethods = options.config.loginMethodList
-    }
-
-    if (isDef(options.config.registerMethodList)) {
-      // @ts-ignore
-      options.config.registerMethods = options.config.registerMethodList
-    }
-
-    if (isDef(options.config.registerMethod)) {
-      // @ts-ignore
-      options.config.defaultRegisterMethod = options.config.registerMethod
-    }
-
-    if (isDef(options.config.contentCSS)) {
-      options.config.contentCss = options.config.contentCSS
-    }
-
-    return options
-  }
-
-  private async getPublicConfig(): Promise<{
-    [prop: string]: any
-  }> {
-    const host = `${this.options.host}` || 'https://core.authing.cn'
-
-    const options: RequestInit = {
-      method: 'GET',
-      credentials: 'include'
-    }
-
-    const fetchRes = await fetch(
-      `${host}/api/v2/applications/${this.options.appId}/public-config`,
-      options
-    )
-
-    const publicConfig = await fetchRes.text()
-
-    return JSON.parse(publicConfig)
-  }
-
-  async getAuthClient(): Promise<AuthenticationClient> {
-    let publicConfig = {} as any
-
-    try {
-      publicConfig = await this.then()
-    } catch (e) {
-      throw new Error(JSON.stringify(e))
-    }
-
-    const _authClientOptions = Object.assign(
-      {},
-      {
-        appId: this.options.appId,
-        appHost: this.options.host || `https://${publicConfig.requestHostname}`,
-        tenantId: this.options.tenantId,
-        redirectUri:
-          this.options.redirectUri || publicConfig.oidcConfig.redirect_uris[0],
-        tokenEndPointAuthMethod:
-          publicConfig.oidcConfig.token_endpoint_auth_method || 'none',
-        introspectionEndPointAuthMethod:
-          publicConfig.oidcConfig.introspection_endpoint_auth_method || 'none'
-      }
-    )
-
-    return new AuthenticationClient(_authClientOptions)
-  }
-
-  static getGuardContainer(selector?: string | HTMLElement): Element | null {
-    const defaultId = 'authing_guard_container'
-
-    if (!selector) {
-      let container = document.querySelector(`#${defaultId}`)
-      if (!container) {
-        container = document.createElement('div')
-        container.id = defaultId
-        document.body.appendChild(container)
-      }
-
-      return container
-    }
-
-    if (typeof selector === 'string') {
-      const res = document.querySelector(selector)
-      if (!res) {
-        console.warn(
-          `Failed to start guard: target selector "${selector}" returned null.`
-        )
-      }
-      return res
-    }
-
-    return selector
-  }
-
-  private eventListeners = Object.values(GuardEventsCamelToKebabMapping).reduce(
-    (acc, evtName) => {
-      return Object.assign({}, acc, {
-        [evtName as string]: []
-      })
-    },
-    {} as GuardEventListeners
-  )
-
-  /**
-   * 启动嵌入模式
-   * @param el String
-   * @returns Promise
-   */
-  async start(el?: string): Promise<User> {
-    ;(this.options.config as Partial<GuardLocalConfig>).target = el
-
-    this.render()
-
-    const userInfo = await this.trackSession()
-
-    if (userInfo) {
-      return Promise.resolve(userInfo)
-    }
-
-    return new Promise(resolve => {
-      this.on('login', userInfo => {
-        resolve(userInfo)
-      })
-    })
-  }
-
-  startRegister() {
-    this.options.defaultScene = GuardModuleType.REGISTER
-
-    this.options.config = Object.assign({}, this.options.config, {
-      defaultScenes: GuardModuleType.REGISTER
-    })
-
-    this.unmount()
-    this.render()
-  }
-
-  async checkLoginStatus(): Promise<JwtTokenStatus | undefined> {
-    const authClient = await this.getAuthClient()
-    const user = await authClient.getCurrentUser()
-
-    if (!user) {
-      return
-    }
-
-    const token = user.token
-
-    if (!token) {
-      return
-    }
-
-    const loginStatus: JwtTokenStatus = await authClient.checkLoginStatus(token)
-
-    if (loginStatus.status) {
-      return loginStatus
-    }
-  }
-
-  changeLang(lang: Lang) {
-    this.options.lang = lang
-
-    this.options.config = Object.assign({}, this.options.config, {
-      lang
-    })
-
-    this.unmount()
-    this.render()
-  }
-
-  changeContentCSS(contentCSS: string) {
-    this.options.config = Object.assign({}, this.options.config, {
-      contentCss: contentCSS
-    })
-
-    this.unmount()
-    this.render()
-  }
-
-  /**
-   * 启动跳转模式
-   */
-  async startWithRedirect(options: StartWithRedirectOptions = {}) {
-    const getRandom = () => Math.random().toString().slice(2)
-
-    const {
-      codeChallengeMethod = 'S256',
-      scope = 'openid profile email phone address',
-      redirectUri,
-      state = getRandom(),
-      nonce = getRandom(),
-      responseMode = 'query',
-      responseType = 'code'
-    } = options
-
-    const authClient = await this.getAuthClient()
-
-    // 生成一个 code_verifier
-    const codeChallenge = authClient.generateCodeChallenge()
-
-    localStorage.setItem('codeChallenge', codeChallenge)
-
-    // 计算 code_verifier 的 SHA256 摘要
-    const codeChallengeDigest = authClient.getCodeChallengeDigest({
-      codeChallenge,
-      method: codeChallengeMethod
-    })
-
-    // 构造 OIDC 授权码 + PKCE 模式登录 URL
-    const url = authClient.buildAuthorizeUrl({
-      codeChallenge: codeChallengeDigest,
-      codeChallengeMethod,
-      scope,
-      redirectUri,
-      state,
-      nonce,
-      responseMode,
-      responseType
-    })
-
-    window.location.href = url
-  }
-
-  async handleRedirectCallback() {
-    const { code, codeChallenge } = this.getCodeAndCodeChallenge()
-
-    const { id_token, access_token } = await this.getAccessTokenByCode(
-      code,
-      codeChallenge
-    )
-
-    const authClient = await this.getAuthClient()
-
-    const userInfo = await authClient.getUserInfoByAccessToken(access_token)
-
-    this.setStorageCache(access_token, id_token, userInfo)
-  }
-
-  private async getAccessTokenByCode(code: string, codeChallenge: string) {
-    const authClient = await this.getAuthClient()
-
-    return await authClient.getAccessTokenByCode(code, {
-      codeVerifier: codeChallenge
-    })
-  }
-
-  private getCodeAndCodeChallenge() {
-    const query = this.parseUrlQuery()
-    const { code = '' } = query
-    const codeChallenge = localStorage.getItem('codeChallenge') || ''
-
-    return {
-      code,
-      codeChallenge
-    }
-  }
-
-  private setStorageCache(
-    accessToken: string,
-    idToken: string,
-    userInfo: string
-  ) {
-    localStorage.setItem('accessToken', accessToken)
-    localStorage.setItem('idToken', idToken)
-    localStorage.setItem('userInfo', JSON.stringify(userInfo))
-  }
-
-  private parseUrlQuery() {
-    const query: Record<string, string> = {}
-
-    let queryString = ''
-
-    try {
-      queryString = window.location.search.split('?')[1]
-    } catch (e) {
-      queryString = window.location.hash.split('#')[1]
-    }
-
-    if (!queryString) {
-      return query
-    }
-
-    queryString.split('&').forEach(item => {
-      const [key, value] = item.split('=')
-      query[key] = value
-    })
-
-    return query
-  }
-
-  /**
-   * 获取当前用户信息
-   */
-  async trackSession(): Promise<User | null> {
-    const authClient = await this.getAuthClient()
-
-    return authClient.getCurrentUser()
-  }
-
-  async logout() {
-    const publicConfig = await this.then()
-
-    let redirectUri = ''
-
-    const origin = window.location.origin
-
-    try {
-      redirectUri = publicConfig.logoutRedirectUris[0]
-    } catch (e) {
-      redirectUri = origin
-    } finally {
-      if (!redirectUri) {
-        redirectUri = origin
-      }
-    }
-
-    const idToken = localStorage.getItem('idToken')
-    let logoutUrl = ''
-    const authClient = await this.getAuthClient()
-
-    authClient.logout()
-
-    if (idToken) {
-      logoutUrl = authClient.buildLogoutUrl({
-        expert: true,
-        redirectUri,
-        idToken
-      })
-    }
-
-    localStorage.clear()
-
-    window.location.href = logoutUrl || redirectUri
-  }
-
-  async render() {
-    const evts: GuardEvents = Object.entries(
-      GuardEventsCamelToKebabMapping
-    ).reduce((acc, [reactEvt, nativeEvt]) => {
-      return Object.assign({}, acc, {
-        [reactEvt]: (...rest: any) => {
-          if (nativeEvt === 'close') {
-            this.hide()
-          }
-
-          // TODO 返回最后一个执行函数的值，实际应该只让监听一次
-          return (
-            (this.eventListeners as any)[nativeEvt as string]
-              .map((item: any) => {
-                return item(...rest)
-              })
-              .slice(-1)[0] ?? true
-          )
-        }
-      })
-    }, {} as GuardEvents)
-
-    const publicConfig = await this.then()
-    const authClient = await this.getAuthClient()
-
-    if (this.options.config) {
-      this.options.config.host =
-        this.options.host || `https://${publicConfig.requestHostname}`
-    }
-
-    const target = Guard.getGuardContainer(this.options.config?.target)
-
-    if (!target) {
-      return
-    }
-
-    const root = (this.root = createRoot(target))
-
-    return root.render(
-      <ReactAuthingGuard
-        {...(evts as GuardEvents)}
-        appId={this.options.appId}
-        tenantId={this.options.tenantId}
-        config={this.options.config}
-        facePlugin={this.options.facePlugin}
-        appendConfig={this.options.appendConfig}
-        visible={this.visible}
-        authClient={authClient}
-      />
-    )
-  }
-
-  on<T extends keyof GuardEventsKebabToCamelType>(
-    evt: T,
-    handler: Exclude<GuardEventsKebabToCamelType[T], undefined>
-  ) {
-    ;(this.eventListeners as any)[evt].push(handler as any)
-  }
-
-  show() {
-    this.visible = true
-    this.render()
-  }
-
-  hide() {
-    this.visible = false
-    this.render()
-  }
-
-  unmount() {
-    const node = Guard.getGuardContainer(this.options.config?.target)
-
-    if (node && this.root) {
-      this.root.unmount()
-    }
-  }
-}

package/src/types.ts

@@ -1,93 +0,0 @@
-import {
-  GuardEventsKebabToCamelType,
-  Lang,
-  GuardProps,
-  GuardLocalConfig,
-  CodeAction,
-  ApiCode,
-  GuardModuleType,
-  LoginMethods,
-  OIDCConnectionMode,
-  SocialConnectionProvider,
-  Protocol,
-  RegisterMethods,
-  GuardMode,
-  InputMethod,
-  GuardPageSene,
-  EmailScene,
-  SceneType
-} from '@authing/react18-components'
-
-export type ICodeAction = `${CodeAction}`
-export type IApiCode = `${ApiCode}`
-export type IGuardModuleType = `${GuardModuleType}`
-export type ILoginMethod = `${LoginMethods}`
-export type IOIDCConnectionMode = `${OIDCConnectionMode}`
-export type ISocialConnectionProvider = `${SocialConnectionProvider}`
-export type IProtocol = `${Protocol}`
-export type IRegisterMethod = `${RegisterMethods}`
-export type IGuardMode = `${GuardMode}`
-export type IInputMethod = `${InputMethod}`
-export type IGuardPageSene = `${GuardPageSene}`
-export type IEmailScene = `${EmailScene}`
-export type ISceneType = `${SceneType}`
-
-export type GuardEventListeners = {
-  [key in keyof GuardEventsKebabToCamelType]: Exclude<
-    Required<GuardEventsKebabToCamelType>[key],
-    undefined
-  >[]
-}
-
-export type CodeChallengeMethod = 'S256' | 'plain'
-
-export interface IGuardConfig extends GuardLocalConfig {
-  // replace socialConnections
-  socialConnectionList?: ISocialConnectionProvider[]
-
-  // replace defaultLoginMethod
-  loginMethod?: ILoginMethod
-
-  // replace loginMethods
-  loginMethodList: ILoginMethod[]
-
-  // replace defaultRegisterMethod
-  registerMethod?: IRegisterMethod
-
-  // replace registerMethods
-  registerMethodList?: IRegisterMethod[]
-
-  // replace contentCss
-  contentCSS?: string
-}
-
-export interface GuardOptions extends GuardProps {
-  appId: string
-  host?: string
-  redirectUri?: string
-  mode?: IGuardMode
-  defaultScene?: IGuardModuleType
-  tenantId?: string
-  lang?: Lang
-  isSSO?: boolean
-  config?: Partial<IGuardConfig> // 兼容 4.x 的 config
-}
-
-export interface StartWithRedirectOptions {
-  codeChallengeMethod?: CodeChallengeMethod
-  scope?: string
-  redirectUri?: string
-  state?: string
-  responseType?:
-    | 'code'
-    | 'code id_token token'
-    | 'code id_token'
-    | 'code token'
-    | 'id_token token'
-    | 'id_token'
-    | 'none'
-  responseMode?: 'query' | 'fragment' | 'form_post'
-  nonce?: string
-}
-
-export * from '@authing/react18-components'

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "outDir": "dist",
-    "target": "es5",
-    "lib": ["dom", "esnext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "declaration": true,
-    "declarationDir": "./dist/typings",
-    "noEmit": false,
-    "jsx": "react",
-    "downlevelIteration": true
-  },
-  "include": [
-    "src/**/*.tsx",
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}