JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q69449F
  • License MIT

Authing OIDC Authentication for Remix

Package Exports

  • @authing/remix
  • @authing/remix/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@authing/remix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@authing/remix

npm npm

中文说明

Simple Authing OIDC Authentication for Remix

Functions

isAuthenticated

function isAuthenticated<User = any>(
  request: Request,
  sessionStorage: SessionStorage,
  options?: IsAuthenticatedOptions
): Promise<User>;

type IsAuthenticatedOptions = {
  failureRedirect?: string;
  successRedirect?: string;
  throwOnError?: boolean;
};

Params:

  • throwOnError: throw error when not authenticated
  • failureRedirect: redirect when not authenticated,such as /login
  • successRedirect: redirect when authenticated, such as /dashboard

Return Type: User

Loader Helpers

createCallbackLoader

function createCallbackLoader({
  appDomain,
  clientId,
  clientSecret,
  failureRedirect,
  sessionStorage,
  successRedirect
}: CallbackLoaderArgs): LoaderFunction;

type CallbackLoaderArgs = {
  appDomain: string;
  clientId: string;
  clientSecret: string;
  sessionStorage: SessionStorage;
  failureRedirect: string;
  successRedirect: string;
};

Params:

  • appDomain: App Domain, like: https://your-app.authing.cn
  • clientId: App ID
  • clientSecret: App Secret
  • sessionStorage: Remix SessionStorage
    • Notice: If you are using Remix v1.1.3 or earlier, please do not use CookieSession, it may cause UTF-8 encoding parsing error
  • failureRedirect: redirect when failed, such as /error
  • successRedirect: redirect when success, such as /dashboard

createLoginLoader

function createLoginLoader({
  appDomain,
  clientId,
  redirectUri,
  scope
}: LoginLoaderArgs): LoaderFunction;

type LoginLoaderArgs = {
  appDomain: string;
  ssoDomain?: string;
  clientId: string;
  redirectUri: string;
  scope: string;
};

Params:

  • appDomain: App Domain, like: https://your-app.authing.cn
  • ssoDomain: SSO Domain, like: https://your-sso.authing.cn, when set, appDomain will be ignored.
  • clientId: App ID
  • redirectUri: Callback Redirect URI (same with Authing console configuration)
  • sope: OAuth Scope, like: openid profile email

createLogoutLoader

function createLogoutLoader({
  redirectUri,
  appDomain,
  sessionStorage
}: LogoutLoaderArgs): LoaderFunction;

type LogoutLoaderArgs = {
  redirectUri: string;
  appDomain: string;
  sessionStorage: SessionStorage;
};

Params:

  • appDomain: App Domain, like: https://your-app.authing.cn
  • redirectUri: Logout Callback Redirect URI (same in authing console)
  • sessionStorage: Remix SessionStorage

Quick Start

Example project at examples/basic.

Add dependencies

npm install --save @authing/remix
# or
yarn add @authing/remix

Config

Placed in app/config.server.ts or somewhere else.

export const clientId =
  process.env.AUTHING_CLIENT_ID || '61e4da899687d7055442f6b7';
export const clientSecret = process.env.AUTHING_CLIENT_SECRET || '';
export const appDomain =
  process.env.AUTHING_CLIENT_DOMAIN || 'https://remix.authing.cn';
export const redirectUri =
  process.env.AUTHING_REDIRECT_URI || 'http://localhost:3000/authing/callback';
export const logoutRedirectUri =
  process.env.AUTHING_LOGOUT_REDIRECT_URI || 'http://localhost:3000/';

Create SessionStorage

Create app/services/session.server.ts.

Notice: If you are using Remix v1.1.3 or earlier, please do not use CookieSession, it may cause UTF-8 encoding parsing error

Create Login, Logout, Callback

Create app/routes/login.tsx:

import { createLoginLoader } from '@authing/remix';
import { appDomain, clientId, redirectUri } from '~/config.server';

export const loader = createLoginLoader({
  appDomain,
  clientId,
  redirectUri,
  scope: 'openid roles username phone profile'
});

Create app/routes/logout.tsx:

import { createLogoutLoader } from '@authing/remix';
import { sessionStorage } from '~/services/session.server';
import { appDomain, logoutRedirectUri } from '~/config.server';

export const loader = createLogoutLoader({
  redirectUri: logoutRedirectUri,
  appDomain,
  sessionStorage
});

Create app/routes/authing/callback.tsx:

import { createCallbackLoader } from '@authing/remix';
import { sessionStorage } from '~/services/session.server';
import { appDomain, clientId, clientSecret } from '~/config.server';

export const loader = createCallbackLoader({
  appDomain,
  clientId,
  clientSecret,
  // 登录失败返回登录页
  failureRedirect: '/error',
  successRedirect: '/user',
  sessionStorage
});

Use in router

import { isAuthenticated } from '@authing/remix';

export const loader: LoaderFunction = async ({ request }) => {
  const user = await isAuthenticated(request, sessionStorage);

  return json(user || {});
};

// in page component:
const user = useLoaderData();

LICENSE

MIT