@authing/remix
v0.1.2
Published
Authing OIDC Authentication for Remix
Downloads
48
Readme
@authing/remix
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 authenticatedfailureRedirect
: 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 IDclientSecret
: App SecretsessionStorage
: 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 IDredirectUri
: Callback Redirect URI (same with Authing console configuration)sope
: OAuth Scope, like:openid profile email
- Ref: Documentation
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