{"id":15463485,"url":"https://github.com/ntamvl/rails_5_1_react_webpacker_example","last_synced_at":"2025-03-24T19:19:40.715Z","repository":{"id":83971100,"uuid":"97580283","full_name":"ntamvl/rails_5_1_react_webpacker_example","owner":"ntamvl","description":"Rails 5.1.2 React Webpacker with google, facebook login example","archived":false,"fork":false,"pushed_at":"2017-08-07T09:39:24.000Z","size":108,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T15:37:38.874Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ntamvl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-18T09:32:03.000Z","updated_at":"2024-02-21T10:48:17.000Z","dependencies_parsed_at":"2023-04-10T08:46:49.568Z","dependency_job_id":null,"html_url":"https://github.com/ntamvl/rails_5_1_react_webpacker_example","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"462ea038f4da0d02d209b2f1b730fd4c6ec2c872"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Frails_5_1_react_webpacker_example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Frails_5_1_react_webpacker_example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Frails_5_1_react_webpacker_example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ntamvl%2Frails_5_1_react_webpacker_example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ntamvl","download_url":"https://codeload.github.com/ntamvl/rails_5_1_react_webpacker_example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245334910,"owners_count":20598389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T00:21:28.443Z","updated_at":"2025-03-24T19:19:40.696Z","avatar_url":"https://github.com/ntamvl.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to setup project with Rails 5.1.x, React, Webpacker\n\n## Create project\n```\nrails new . --webpack=react --database=postgresql -T\n```\n\n## Edit Gemfile\n```ruby\ngem 'dotenv-rails', '2.2.1'\ngem 'bootstrap', '~\u003e 4.0.0.alpha6'\ngem \"devise\"\ngem \"omniauth\"\ngem \"omniauth-google-oauth2\"\ngem \"omniauth-facebook\"\ngem 'devise-bootstrapped', github: 'king601/devise-bootstrapped', branch: 'bootstrap4'\ngem 'awesome_print'\n```\n\nthen run:\n```\nbundle install\n```\n\n## Add Yarn packages\n```\nyarn add webpack webpack-merge js-yaml path-complete-extname webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script babel-core babel-preset-env babel-polyfill compression-webpack-plugin rails-erb-loader glob extract-text-webpack-plugin node-sass file-loader sass-loader css-loader style-loader postcss-loader autoprefixer postcss-smart-import precss resolve-url-loader babel-plugin-syntax-dynamic-import babel-plugin-transform-class-properties\n```\n\nand add more\n```\nyarn add redux react-redux redux-thunk redux-logger tether node-uuid jquery\n```\n\n## Config Devise\nInstall devise:\n```\nrails generate devise:install\n```\n\nCreate model User:\n```\nrails g devise User\n```\n\nCreate devise's views\n```\nrails generate devise:views:bootstrapped\n```\n\nLast, run:\n```\nrails db:migrate\n```\n\n## Generate model Identity\n```\nrails g model identity user:references provider:string access_token:string refresh_token:string uid:string name:string email:string nick_name:string image:string phone:string urls:string raw:json oauth_expires_at:datetime\n\nrails db:migrate\n```\n\n## Connfig Omniauth\nEdit devise config at `config/initializers/devise.rb`:\n```ruby\nconfig.omniauth :google_oauth2, ENV['GOOGLE_OAUTH2_APP_ID'], ENV['GOOGLE_OAUTH2_APP_SECRET'], { scope: \"email\" }\nconfig.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], { scope: \"email\" }\n```\n\n## Connect Devise with Omniauth\nAdd `:omniauthable, omniauth_providers: [:facebook, :google_oauth2]` to `app/models/user.rb`\n\nLike this:\n```ruby\ndevise :database_authenticatable, :registerable,\n    :recoverable, :rememberable, :trackable, :validatable,\n    :omniauthable, omniauth_providers: [:facebook, :google_oauth2]\n```\n\nCreate controller `app/controllers/user/omniauth_callbacks_controller.rb`\n```ruby\nclass Users::OmniauthCallbacksController \u003c Devise::OmniauthCallbacksController\n  def facebook\n    generic_callback(\"facebook\")\n  end\n\n  def google_oauth2\n    generic_callback( \"google_oauth2\" )\n  end\n\n  def generic_callback(provider)\n    @identity = User.from_omniauth(request.env[\"omniauth.auth\"])\n\n    @user = @identity || current_user\n    if @user.persisted?\n      sign_in_and_redirect @user, :event =\u003e :authentication\n      set_flash_message(:notice, :success, kind: provider.capitalize) if is_navigational_format?\n    else\n      session[\"devise.#{provider}_data\"] = request.env[\"omniauth.auth\"]\n      redirect_to new_user_registration_url\n    end\n  end\nend\n```\n\n## Edit user model\nAdd to `app/models/user.rb` with below content:\n```ruby\ndef self.new_with_session params, session\n  super.tap do |user|\n    if data = session[\"devise.facebook_data\"] \u0026\u0026\n      session[\"devise.facebook_data\"][\"extra\"][\"raw_info\"]\n      user.email = data[\"email\"] if user.email.blank?\n    end\n  end\nend\n\ndef self.from_omniauth(auth)\n  where(email: auth.info.email).first_or_initialize.tap do |user|\n    user.email = auth.info.email\n    user.name = auth.info.name\n    user.password = Devise.friendly_token[0,20]\n    user.provider = auth.provider\n    user.save!\n\n    user.identities.where(provider: auth.provider, uid: auth.uid).first_or_initialize.tap do |identity|\n        identity.provider = auth.provider\n        identity.uid = auth.uid\n        identity.name = auth.info.name\n        identity.email = auth.info.email\n        identity.access_token = auth.credentials.token\n        identity.oauth_expires_at = Time.at(auth.credentials.expires_at)\n        identity.raw = auth.to_json\n        identity.urls = (auth.info.urls || \"\").to_json\n        identity.save!\n    end\n  end\nend\n```\n\n## Update routes `config/routes`;\n```ruby\ndevise_for :users, controllers: { omniauth_callbacks: \"users/omniauth_callbacks\" }\n```\n\n## Create .env\n```\nGOOGLE_OAUTH2_APP_ID=[your app id]\nGOOGLE_OAUTH2_APP_SECRET=[your app secret]\nFACEBOOK_APP_ID=[your app id]\nFACEBOOK_APP_SECRET=[your app secret]\n```\n\n## How to run this project:\n```\ncd \u0026\u0026 git clone https://github.com/ntamvl/rails_5_1_react_webpacker_example.git\n```\n\nEdit database connection config at `config/database.yml` before run this command:\n\n```\ncd rails_5_1_react_webpacker_example\nrails db:create db:migrate \u0026\u0026 yarn install\n```\n\nAdd google, facebook app id, secret to file `.env`\nLast run:\n```\nrails s\n```\n\nthen visit page `http://localhost:3000/`\n\nEnjoy :D\n\n-------------------------------------------------------\n**Refs:**\n- http://willschenk.com/setting-up-devise-with-twitter-and-facebook-and-other-omniauth-schemes-without-email-addresses/\n- https://www.crondose.com/2016/12/guide-integrating-omniauth-rails-5-facebook-login-feature/\n- https://github.com/ntamvl/rails5_starter\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntamvl%2Frails_5_1_react_webpacker_example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fntamvl%2Frails_5_1_react_webpacker_example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fntamvl%2Frails_5_1_react_webpacker_example/lists"}