@authing/guard-shim-react18 5.0.8-alpha.0 → 5.0.8-alpha.2

package/README.md

@@ -1,137 +1,3 @@
-<div align=center>
-  <img width="300" src="https://files.authing.co/authing-console/authing-logo-new-20210924.svg" />
-</div>
+# @authing/guard-shim-react18
 
-<br />
-
-English | [简体中文](./README.zh_CN.md)
-
-<br />
-
-Guard is a portable authentication component provided by authing. You can embed it in any application to handle complex user authentication processes in one stop.
-
-Prepare your native JavaScript project and follow the guide to connect Guard to your native JavaScript project!
-
-## Install
-
-From CDN:
-
-``` html
-<link rel="stylesheet" href="https://cdn.authing.co/packages/guard/5.0.7/guard.min.css" />
-<script src="https://cdn.authing.co/packages/guard/5.0.7/guard.min.js"></script>
-```
-
-From NPM:
-
-``` shell
-npm install --save @authing/guard
-```
-
-## Initialize
-
-|Key|Type|Default|Requires
-|-----|----|----|----|
-|appId|String| - |Y|
-|mode|normal / modal|normal|N|
-|defaultScene|GuardModuleType|login|N|
-|align|none / left / center / right | none | N | Guard default position|
-|lang|zh-CN / en-US|zh-CN|N|
-|isSSO|Boolean|true|N|
-|host|String| - |N|
-|scope|String| - |N|
-|redirectUri|String| - |N|
-|state|String| - |N|
-
-
-``` javascript
-// From CDN
-const guard = new GuardFactory.Guard({
-  appId: '62e22721c889dd44bad1dda2',
-  host: 'https://guard-test-2022.authing.cn',
-  redirectUri: 'http://localhost:3000/callback'
-})
-
-// From npm
-const guard = new Guard({
-  appId: '62e22721c889dd44bad1dda2',
-  host: 'https://guard-test-2022.authing.cn',
-  redirectUri: 'http://localhost:3000/callback'
-})
-```
-
-## Guard provides three login modes
-
-### Embed mode
-
-Render Guard component
-
-``` javascript
-guard.start('#root').then(userInfo => {
-  console.log(userInfo)
-})
-```
-
-### modal mode
-
-When the parameter 'mode' of Guard instantiation is' modal ', the modal mode is started, and the following API can be used to display and hide the guard.
-
-``` javascript
-guard.show()
-```
-
-``` javascript
-guard.hide()
-```
-
-### Redirect mode
-
-Login by code, redirect to login page
-
-``` javascript
-guard.startWithRedirect()
-```
-
-Auto handle redirect callback
-
-``` javascript
-guard.handleRedirectCallback()
-```
-
-Logout
-
-``` javascript
-guard.logout()
-```
-
-## Regist events
-
-``` javascript
-guard.on('load', e => {
-  console.log(e)
-})
-
-guard.on('login', userInfo => {
-  console.log(userInfo)
-})
-
-// ......
-```
-
-## Integrate authing js sdk instance
-
-Guard integrated AuthenticationClient, so you can access all apis of AuthenticationClient, etc:
-
-``` javascript
-guard.getAuthClient().then(authClient => {
-  authClient.registerByEmail()
-  authClient.validateToken()
-  // .........
-})
-// ....
-```
-
-Refer to [Authentication SDK](https://docs.authing.cn/v2/reference/sdk-for-node/authentication/) 
-
-## Documentation
-
-To check out live examples and docs, visit [docs](https://docs.authing.cn/v2/reference/guard/v3/mpa.html)
+Be only used for internal

package/package.json

@@ -1,30 +1,26 @@
 {
   "name": "@authing/guard-shim-react18",
-  "version": "5.0.8-alpha.0",
+  "version": "5.0.8-alpha.2",
   "description": "Guard shim for react18",
   "main": "src/index.tsx",
   "scripts": {
     "autoinstall": "npm ci",
-    "build": "echo 'No need to build @authing/guard-shim-react18'",
+    "build": "echo 'No need to build for @authing/guard-shim-react18'",
     "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": "^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"
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@authing/react18-components": "^4.1.0-alpha.0",
-    "axios": "^0.27.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@authing/react18-components": "^4.1.0-alpha.0"
   },
   "author": "https://github.com/authing",
   "license": "MIT",

package/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { createRoot } from 'react-dom/client'
+import { createRoot, Root } from 'react-dom/client'
 
 import {
   GuardOptions,
@@ -35,6 +35,8 @@ export class Guard {
 
   private publicConfig?: Record<string, unknown>
 
+  private root?: Root
+
   constructor(options: GuardOptions) {
     if (!options.appId) {
       throw new Error('appId is required')
@@ -470,7 +472,7 @@ export class Guard {
       return
     }
 
-    const root = createRoot(target)
+    const root = (this.root = createRoot(target))
 
     return root.render(
       <ReactAuthingGuard
@@ -506,8 +508,8 @@ export class Guard {
   unmount() {
     const node = Guard.getGuardContainer(this.options.config?.target)
 
-    if (node) {
-      ReactDOM.unmountComponentAtNode(node)
+    if (node && this.root) {
+      this.root.unmount()
     }
   }
 }

package/README.zh_CN.md

@@ -1,137 +0,0 @@
-<div align=center>
-  <img width="300" src="https://files.authing.co/authing-console/authing-logo-new-20210924.svg" />
-</div>
-
-<br />
-
-简体中文 | [English](./README.md)
-
-<br />
-
-Guard 是 Authing 提供的一种轻便的认证组件，你可以把它嵌入在你任何的 SPA（Single Page Application）应用中，一站式处理复杂的用户认证流程。
-
-准备好你的 原生 JavaScript 项目，跟随引导将 Guard 接入到你的 原生 JavaScript 项目中吧！
-
-## 安装
-
-使用 CDN:
-
-``` html
-<link rel="stylesheet" src="https://cdn.authing.co/packages/guard/5.0.0/guard.min.css" />
-<script src="https://cdn.authing.co/packages/guard/5.0.0/guard.min.js"></script>
-```
-
-使用 NPM:
-
-``` shell
-npm install --save @authing/guard
-```
-
-## 初始化
-
-|字段|类型|默认是|必传
-|-----|----|----|----|
-|appId|String| - |是|
-|mode|normal / modal|normal|否|
-|defaultScene|GuardModuleType|login|否|
-| align        |none / left / center / right | none | 否 |
-|lang|zh-CN / en-US|zh-CN|否|
-|isSSO|Boolean|true|否|
-|host|String| - |否|
-|scope|String| - |否|
-|redirectUri|String| - |否|
-|state|String| - |否|
-
-
-``` javascript
-// 使用 CDN
-const guard = new GuardFactory.Guard({
-  appId: '62e22721c889dd44bad1dda2',
-  host: 'https://guard-test-2022.authing.cn',
-  redirectUri: 'http://localhost:3000/callback'
-})
-
-// 使用 npm
-const guard = new Guard({
-  appId: '62e22721c889dd44bad1dda2',
-  host: 'https://guard-test-2022.authing.cn',
-  redirectUri: 'http://localhost:3000/callback'
-})
-```
-
-## Guard 提供三种登录模式
-
-### 嵌入模式
-
-渲染 Guard 组件
-
-``` javascript
-guard.start('#root').then(userInfo => {
-  console.log(userInfo)
-})
-```
-
-### 弹窗模式
-
-当 Guard 实例化的参数 `mode` 为 `modal` 时，将启动模态模式，下面的 API 可用于显示和隐藏 Guard。
-
-``` javascript
-guard.show()
-```
-
-``` javascript
-guard.hide()
-```
-
-### 跳转模式
-
-使用 code 码登录，跳转到登录页面
-
-``` javascript
-guard.startWithRedirect()
-```
-
-code 换 token，自动处理页面重定向
-
-``` javascript
-guard.handleRedirectCallback()
-```
-
-登出
-
-``` javascript
-guard.logout()
-```
-
-## 注册事件
-
-``` javascript
-guard.on('load', e => {
-  console.log(e)
-})
-
-guard.on('login', userInfo => {
-  console.log(userInfo)
-})
-
-// ......
-```
-
-## 集成 Authing JS SDK
-
-Guard 集成了 AuthenticationClient，所以你可以访问 AuthenticationClient 的所有 api 等等:
-
-``` javascript
-guard.getAuthClient().then(authClient => {
-  authClient.registerByEmail()
-  authClient.validateToken()
-  // .........
-})
-// ....
-```
-
-参考 [Authentication SDK](https://docs.authing.cn/v2/reference/sdk-for-node/authentication/) 
-
-## 文档
-
-参考详细文档说明 [docs](https://docs.authing.cn/v2/reference/guard/v3/mpa.html)

package/scripts/build.js

@@ -1,26 +0,0 @@
-const path = require('path')
-const rm = require('rimraf')
-const webpack = require('webpack')
-const webpackEsmBundlerConfig = require('./webpack.esm.config')
-const webpackGlobalConfig = require('./webpack.global.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) => {
-    if (error) {
-      console.error('build guard.js esm bundler error: ', error)
-    }
-  })
-  webpack(webpackGlobalConfig, (error) => {
-    if (error) {
-      console.error('build guard.js global error: ', error)
-    }
-  })
-}

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/scripts/webpack.global.config.js

@@ -1,40 +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/global'),
-    library: {
-      name: 'GuardFactory',
-      type: 'global'
-    }
-  },
-  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'
-    })
-  ]
-}