React Native + Rails(devise token auth)でトークン認証を行い、アプリにリダイレクトするサンプルコード

概要

Rails単体やSPAでログイン認証を行う際、メールアドレスにトークンを記載したメールを送信して認証を行いますが、今回はスマホアプリで、メールのトークン認証とリダイレクトのコードを公開いたします！

こちらがイメージです。

このサンプルコードを購入することで下記を解決することができます

・devise token authのconfirmationを利用すること
・スマホからトークン認証を行うこと
・トークン認証後自動でアプリにリダイレクトすること

環境

React Native(package.json)

{
 "main": "node_modules/expo/AppEntry.js",
 "scripts": {
   "start": "expo start",
   "android": "expo start --android",
   "ios": "expo start --ios",
   "web": "expo start --web",
   "eject": "expo eject"
 },
 "dependencies": {
   "@expo/vector-icons": "^10.2.0",
   "@react-native-community/async-storage": "^1.11.0",
   "@react-native-community/cli-debugger-ui": "^4.9.0",
   "@react-native-community/masked-view": "^0.1.10",
   "@react-navigation/bottom-tabs": "^5.7.2",
   "@react-navigation/native": "^5.7.1",
   "axios": "^0.19.2",
   "expo": "~38.0.8",
   "expo-status-bar": "^1.0.2",
   "native-base": "^2.13.13",
   "react": "~16.11.0",
   "react-dom": "~16.11.0",
   "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
   "react-native-gesture-handler": "^1.7.0",
   "react-native-screens": "^2.9.0",
   "react-native-storage": "^1.0.1",
   "react-native-web": "~0.11.7",
   "react-navigation": "^4.4.0",
   "react-navigation-stack": "^2.8.2"
 },
 "devDependencies": {
   "@babel/core": "^7.8.6",
   "babel-preset-expo": "~8.1.0"
 },
 "private": true
}

Rails(Gemfile)

source 'https://rubygems.org'
git_source(:github) { |repo| 'https://github.com/#{repo}.git' }

ruby '2.5.1'

gem 'rails', '~> 6.0.3', '>= 6.0.3.2'
gem 'puma', '~> 4.1'
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
 gem 'sqlite3', '~> 1.4'
 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
 gem 'letter_opener'
 gem 'letter_opener_web'
 gem 'listen', '~> 3.2'
 gem 'spring'
 gem 'spring-watcher-listen', '~> 2.0.0'
end

group :production do
 gem 'pg'
end

gem 'devise'
gem 'rack-cors'
gem 'devise_token_auth'
gem 'devise'
gem 'activeadmin'

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

ソースコードの説明