elm-pages authentication examples and approaches (Oauth, magic link, etc.)

[dillonkearns]

Let's share conceptual overviews, resources, and code snippets for authentication in elm-pages applications in this thread. Since we can do full-stack apps with elm-pages, there are many different strategies we can use, so it's great to see what the community comes up with. Please share if you have anything to add!

[dillonkearns]

The full-stack todo application in the examples/ folder has a working example of magic link auth:

• elm-pages/examples/todos/app/Route/Login.elm

  Lines 439 to 546 in 9b150cb

  	sendEmailBackendTask : EmailAddress -> EnvVariables -> BackendTask FatalError (Result SendGrid.Error ())
  	sendEmailBackendTask recipient env =
  	emailToMagicLink recipient env.siteUrl
  	|> BackendTask.andThen
  	(\magicLinkString ->
  	let
  	message : NonemptyString
  	message =
  	String.Nonempty.NonemptyString 'W' ("elcome! Please confirm that this is your email address.\n" ++ magicLinkString)
  	in
  	if sendFake then
  	message
  	|> String.Nonempty.toString
  	|> Script.log
  	|> BackendTask.map Ok
  	else
  	let
  	senderEmail : Maybe EmailAddress
  	senderEmail =
  	EmailAddress.fromString "[email protected]"
  	in
  	senderEmail
  	|> Maybe.map
  	(\justSender ->
  	SendGrid.textEmail
  	{ subject = String.Nonempty.NonemptyString 'T' "odo app login"
  	, to = List.Nonempty.fromElement recipient
  	, content = message
  	, nameOfSender = "Todo App"
  	, emailAddressOfSender = justSender
  	}
  	|> sendEmail env.sendGridKey
  	)
  	|> Maybe.withDefault (BackendTask.fail (FatalError.fromString "Expected a valid sender email address."))
  	)
  	sendEmail :
  	String
  	-> SendGrid.Email
  	-> BackendTask noError (Result SendGrid.Error ())
  	sendEmail apiKey_ email_ =
  	BackendTask.Http.request
  	{ method = "POST"
  	, headers = [ ( "Authorization", "Bearer " ++ apiKey_ ) ]
  	, url = SendGrid.sendGridApiUrl
  	, body = SendGrid.encodeSendEmail email_ |> BackendTask.Http.jsonBody
  	, retries = Nothing
  	, timeoutInMs = Nothing
  	}
  	(BackendTask.Http.expectWhatever ())
  	|> BackendTask.mapError
  	(\response ->
  	case response.recoverable of
  	BackendTask.Http.BadUrl url ->
  	SendGrid.BadUrl url
  	BackendTask.Http.Timeout ->
  	SendGrid.Timeout
  	BackendTask.Http.NetworkError ->
  	SendGrid.NetworkError
  	BackendTask.Http.BadStatus metadata body ->
  	SendGrid.decodeBadStatus metadata body
  	BackendTask.Http.BadBody maybeError string ->
  	SendGrid.BadUrl ""
  	)
  	|> BackendTask.toResult
  	parseMagicHash : String -> BackendTask FatalError ( String, Time.Posix )
  	parseMagicHash magicHash =
  	BackendTask.Custom.run "decrypt"
  	(Encode.string magicHash)
  	(Decode.string
  	|> Decode.map
  	(Decode.decodeString
  	(Decode.map2 Tuple.pair
  	(Decode.field "text" Decode.string)
  	(Decode.field "expiresAt" (Decode.int |> Decode.map Time.millisToPosix))
  	)
  	>> Result.mapError Decode.errorToString
  	)
  	)
  	|> BackendTask.allowFatal
  	|> BackendTask.andThen (BackendTask.fromResult >> BackendTask.mapError FatalError.fromString)
  	parseMagicHashIfNotExpired : String -> BackendTask FatalError (Maybe String)
  	parseMagicHashIfNotExpired magicHash =
  	BackendTask.map2
  	(\( email, expiresAt ) currentTime ->
  	let
  	isExpired : Bool
  	isExpired =
  	Time.posixToMillis currentTime > Time.posixToMillis expiresAt
  	in
  	if isExpired then
  	Nothing
  	else
  	Just email
  	)
  	(parseMagicHash magicHash)
  	BackendTask.Time.now

• It uses a small snippet of JS code to run built-in encrypt/decrypt functions from NodeJS (that is executed with BackendTask.Custom):

  elm-pages/examples/todos/custom-backend-task.ts

  Lines 185 to 223 in 9b150cb

  	/* Encrypt/decrypt code source: https://github.com/kentcdodds/kentcdodds.com/blob/fe107c6d284012a72cc98f076479bfd6dbe7fb02/app/utils/encryption.server.ts */
  	const algorithm = "aes-256-gcm";
  	let secret = "not-at-all-secret";
  	if (process.env.MAGIC_LINK_SECRET) {
  	secret = process.env.MAGIC_LINK_SECRET;
  	} else if (process.env.NODE_ENV === "production") {
  	throw new Error("Must set MAGIC_LINK_SECRET");
  	}
  	const ENCRYPTION_KEY = crypto.scryptSync(secret, "salt", 32);
  	const IV_LENGTH = 12;
  	const UTF8 = "utf8";
  	const HEX = "hex";
  	export function encrypt(text: string) {
  	const iv = crypto.randomBytes(IV_LENGTH);
  	const cipher = crypto.createCipheriv(algorithm, ENCRYPTION_KEY, iv);
  	let encrypted = cipher.update(text, UTF8, HEX);
  	encrypted += cipher.final(HEX);
  	const authTag = cipher.getAuthTag();
  	return `${iv.toString(HEX)}:${authTag.toString(HEX)}:${encrypted}`;
  	}
  	export function decrypt(text: string) {
  	const [ivPart, authTagPart, encryptedText] = text.split(":");
  	if (!ivPart || !authTagPart || !encryptedText) {
  	throw new Error("Invalid text.");
  	}
  	const iv = Buffer.from(ivPart, HEX);
  	const authTag = Buffer.from(authTagPart, HEX);
  	const decipher = crypto.createDecipheriv(algorithm, ENCRYPTION_KEY, iv);
  	decipher.setAuthTag(authTag);
  	let decrypted = decipher.update(encryptedText, HEX, UTF8);
  	decrypted += decipher.final(UTF8);
  	return decrypted;
  	}

It uses cookies to manage sessions.

This expectSessionOrRedirect helper is useful for getting the login session ID from a cookie. elm-pages uses signed cookies so you can't spoof a session ID by manually entering a value unless you have the signing secret. It's important to rotate your secrets and use other standard security practices to keep the secrets secure of course.

elm-pages/examples/todos/src/MySession.elm

Lines 55 to 75 in 9b150cb

	expectSessionOrRedirect :
	(Session.Session -> BackendTask FatalError ( Session.Session, Response data errorPage ))
	-> Request
	-> BackendTask FatalError (Response data errorPage)
	expectSessionOrRedirect toRequest request =
	Session.withSessionResult
	{ name = "mysession"
	, secrets = secrets
	, options = Nothing
	}
	(\sessionResult ->
	sessionResult
	|> Result.map toRequest
	|> Result.withDefault
	(BackendTask.succeed
	( Session.empty
	, Route.redirectTo Route.Login
	)
	)
	)
	request

This example app models auth where a user can have multiple login session. If you were to delete all login sessions associated with a given user, that would effectively "log out all devices". Or you could log out a single device by deleting one specific session entry.

Then todo items are looked up through the user via a session ID:

• elm-pages/examples/todos/custom-backend-task.ts

  Lines 114 to 118 in 9b150cb

  	export async function getTodosBySession(sessionId) {
  	try {
  	return (
  	await prisma.session.findUnique({
  	where: { id: sessionId },

• elm-pages/examples/todos/app/Route/Visibility__.elm

  Lines 243 to 268 in 9b150cb

  	|> MySession.expectSessionDataOrRedirect (Session.get "sessionId")
  	(\parsedSession session ->
  	case visibilityFromRouteParams routeParams of
  	Just visibility ->
  	BackendTask.Custom.run "getTodosBySession"
  	(Encode.string parsedSession)
  	(Decode.list todoDecoder)
  	|> BackendTask.allowFatal
  	|> BackendTask.map
  	(\todos ->
  	( session
  	, Response.render
  	{ entries = todos |> List.map toOptimisticTodo
  	, visibility = visibility
  	, requestTime = requestTime
  	}
  	)
  	)
  	Nothing ->
  	BackendTask.succeed
  	( session
  	, Route.Visibility__ { visibility = Nothing }
  	|> Route.redirectTo
  	)
  	)

You can see a live demo at https://elm-pages-todos.netlify.app/.