remix-auth-vk

VKStrategy

The VK strategy is used to authenticate users against a VK account. It extends the OAuth2Strategy.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅

Installation

npm i remix-auth-vk

yarn add remix-auth-vk

Usage

Create VK application

Follow the steps on the VK documentation to create a new application and get a client ID and secret.

Create the strategy instance

import { VKStrategy } from 'remix-auth-vk'

const vkStrategy = new VKStrategy(
  {
    clientID: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    callbackURL: 'https://example.com/auth/vk/callback',
  },
  async ({ accessToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value })
  }
)

authenticator.use(vkStrategy)

Setup your routes

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/vk" method="post">
      <button>Login with VK</button>
    </Form>
  )
}

// app/routes/auth/vk.tsx
import { ActionFunction, LoaderFunction } from 'remix'
import { authenticator } from '~/auth.server'

export const loader: LoaderFunction = () => redirect('/login')

export const action: ActionFunction = ({ request }) => {
  return authenticator.authenticate('vk', request)
}

// app/routes/auth/vk/callback.tsx
import { ActionFunction, LoaderFunction } from 'remix'
import { authenticator } from '~/auth.server'

export const loader: LoaderFunction = ({ request }) => {
  return authenticator.authenticate('vk', request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  })
}