Server Side Functions
Functions in this section are only useable in the Remix Loader.
getUserOrRedirect
This function returns a user object, if the user is logged in. Otherwise, it redirects the user to the login page.
Optional Arguments
- Name
postLoginRedirect- Type
- string
- Description
An optional argument to specify where the user should be redirected to after they login. If not specified, the user will be redirected to your default Application URL.
- Name
forceRefresh- Type
- boolean
- Description
An optional argument to specify if the user's information should be refreshed on render.
Example
import { auth } from '../auth/auth.server'
export const loader = async ({ request, context }: LoaderFunctionArgs) => {
// If the user is not logged in, they will be redirected to the login page
const user = await auth.getUserOrRedirect(
request,
context,
{ postLoginRedirect: "/foo"}
)
return json({ user: user })
}
const WelcomeMessage = async () => {
const { user } = useLoaderData<typeof loader>()
return <div>Hello {user.firstName}!</div>
}
getUser
This function returns a user object, if the user is logged in. Otherwise, it returns undefined.
If you want to guarantee that the user's information is fresh (useful for sensitive routes), you can set forceRefresh to true.
Optional Arguments
- Name
forceRefresh- Type
- boolean
- Description
An optional argument to specify if the user's information should be refreshed on render.
Example
import { auth } from '../auth/auth.server'
export const loader = async ({ request, context }: LoaderFunctionArgs) => {
const user = await auth.getUser(
request,
context,
{ forceRefresh: true }
)
return json({ user: user })
}
const WelcomeMessage = async () => {
const { user } = useLoaderData<typeof loader>()
if (user) {
return <div>Hello {user.firstName}!</div>
} else {
return <div>Please log in to be welcomed</div>
}
}
getSignupPageUrl
Gets the URL of the signup page. This is useful if you want to link to the signup page from your application.
Arguments
- Name
redirectBackToPath- Type
- string
- Description
The path to redirect the user to after they sign up. Set the default in your Dashboard.
- Name
userSignupQueryParameters- Type
- object
- Description
Query parameters to add to the signup URL.
import { auth } from '../auth/auth.server'
export const loader = async () => {
const user = await auth.getUser(request, context)
if (!user) {
return redirect(auth.getSignupPageUrl({
redirectBackToPath: "/foo",
userSignupQueryParameters: {
"ref": "my-cool-blog-post"
}
}))
}
...
}
getLoginPageUrl
Gets the URL of the login page. This is useful if you want to link to the login page from your application.
Arguments
- Name
redirectBackToPath- Type
- string
- Description
The path to redirect the user to after they log in. Set the default in your Dashboard.
- Name
userSignupQueryParameters- Type
- object
- Description
Query parameters to add to the login URL.
import { auth } from '../auth/auth.server'
export const loader = async () => {
const user = await auth.getUser(request, context)
if (!user) {
return redirect(auth.getLoginPageUrl({
redirectBackToPath: "/foo",
userSignupQueryParameters: {
"ref": "my-cool-blog-post"
}
}))
}
...
}
getAccountPageUrl
Gets the URL of the account page. This is useful if you want to link to the account page from your application.
Arguments
- Name
redirectBackToUrl- Type
- string
- Description
The URL to redirect the user to when they click the back button on the account page
export const loader = async () => {
const accountUrl = auth.getAccountPageUrl({
redirectBackToUrl: "http://localhost:3000/foo",
})
return json({ accountUrl: accountUrl })
}
getOrgPageUrl
Gets the URL of the organization page for a given org ID. If an org ID is not provided, one is chosen automatically.
Arguments
- Name
orgId- Type
- string
- Description
The ID of the organization to get the URL for
- Name
redirectBackToUrl- Type
- string
- Description
The URL to redirect the user to when they click the back button on the account page
export const loader = async () => {
const orgPageUrl = auth.getOrgPageUrl("my-org-id", {
redirectBackToUrl: "http://localhost:3000/foo",
})
return json({ orgPageUrl: orgPageUrl })
}
getCreateOrgPageUrl
Gets the URL of the create organization page. This is useful if you want to link to the create organization page from your application.
Arguments
- Name
redirectBackToUrl- Type
- string
- Description
The URL to redirect the user to when they click the back button on the account page
export const loader = async () => {
const createOrgPageUrl = auth.getCreateOrgPageUrl({
redirectBackToUrl: "http://localhost:3000/foo",
})
return json({ createOrgPageUrl: createOrgPageUrl })
}
getSetupSAMLPageUrl
Gets the URL of a page to setup SAML for the given org ID.
Arguments
- Name
orgId*- Type
- string
- Description
The ID of the organization to get the URL for
- Name
redirectBackToUrl- Type
- string
- Description
The URL to redirect the user to when they click the back button on the account page
export const loader = async () => {
const setupSAMLPageUrl = auth.getSetupSAMLPageUrl("my-org-id", {
redirectBackToUrl: "http://localhost:3000/foo",
})
return json({ setupSAMLPageUrl: setupSAMLPageUrl })
}
Using PropelAuth Backend APIs
Our backend APIs allow you to do things like block users, send invitations, and more. You can use our APIs like so:
export const loader = async () => {
const orgQueryRes = await auth.api.fetchOrgByQuery({
name: "acme"
})
return json({ orgQueryRes: orgQueryRes })
}